React 更新 Switch 控制器状态答案

【问题标题】：React updating Switch controller StateReact 更新 Switch 控制器状态
【发布时间】：2021-08-16 16:08:36
【问题描述】：

我有多个 Switch 元素，我正在尝试使用对象状态来控制开关的状态：真或假。

import React, { useState, useEffect } from 'react';
import { Switch } from '@material-ui/core';

const Test = () => {
   const [ notifications, setNotifications ] = useState({
        transactionModification: false,
        missedPromissPay: false,
        chargesPosted: false,
        productUpdate: false
    })

    return (
       <div className="row">
            <div className="col-sm-2">
                <FormGroup check className="mb-20">
                    <Label for="transactionModification" className="mr-sm-10">Transaction Modifications</Label>
                    <Switch name="transactionModification" checked={notifications.transactionModification} 
                        onChange={(prevState) => setNotifications({...prevState, transactionModification: !prevState.transactionModification})} />
                </FormGroup>
            </div>
            <div className="col-sm-2">
                <FormGroup check className="mb-20">
                    <Label for="missedPromissPay" className="mr-sm-10">Missed Promise to Pay</Label>
                    <Switch name="missedPromissPay" checked={notifications.missedPromissPay} 
                        onChange={(prevState) => setNotifications({...prevState, missedPromissPay: !prevState.missedPromissPay})} />
                </FormGroup>
            </div>
            <div className="col-sm-2">
                <FormGroup check className="mb-20">
                    <Label for="chargesPosted" className="mr-sm-10">Charges Posted</Label>
                    <Switch name="chargesPosted" checked={notifications.chargesPosted} 
                        onChange={(prevState) => setNotifications({...prevState, chargesPosted: !prevState.chargesPosted})} />
                </FormGroup>
            </div>
            <div className="col-sm-2">
                <FormGroup check className="mb-20">
                    <Label for="productUpdateNotifications" className="mr-sm-10">Product Update Notifications</Label>
                    <Switch name="productUpdateNotifications" checked={notifications.productUpdate} 
                        onChange={(prevState) => setNotifications({...prevState, productUpdate: !prevState.productUpdate})} />
                </FormGroup>
            </div>
        </div>
    );
}

export default Test;

问题是，当我检查一个 Switch，然后再检查另一个 Switch 时，第一个选中的 Switch 会更改其值。为什么会这样？

谢谢

【问题讨论】：

标签： reactjs react-hooks state

【解决方案1】：

您使用的功能更新错误。这是正确的方法：

onChange={() => setNotifications((prevState)=>{...prevState, chargesPosted: !prevState.chargesPosted})}

您必须向 setState 添加回调。按照您的操作方式，prevState 将成为事件。

【讨论】：