使用 setState 设置新状态和更改旧状态的区别答案

【问题标题】：The difference between setting a new state and changing the old state using setState使用 setState 设置新状态和更改旧状态的区别
【发布时间】：2018-09-23 20:04:21
【问题描述】：

我正在尝试设置组件中状态键之一的值。状态如下：

this.state = {
        stateValue1: false,
        stateValue2: false,
        stateValue3: false
    };

为了改变我的状态，我使用了这个函数：

 handleSwitch = type => {

    this.setState((prevState, type) => ({
        ...prevState,
        [type]: !prevState[type]
    }));

};

根据我想要更改的状态键，我使用它：

handleSwitch("stateValue2")

但结果我得到了

    {
        stateValue1: false,
        stateValue2: false,
        stateValue3: false
        [object Object]: true
    }

但是，当我使用新对象作为 setState 函数的参数时，一切正常。为什么？

工作代码：

handleNotificationSwitch = type => {
    const newState = {
        ...this.state,
        [type]: !this.state[type]
    };

    this.setState(newState);
};

及其结果：

    {
        stateValue1: false,
        stateValue2: true,
        stateValue3: false
    }

【问题讨论】：

(prevState, type) =>，隐藏包含函数中的type 参数？给更新程序的第二个参数是props。

标签： javascript reactjs react-native ecmascript-6

【解决方案1】：

根据docs一个更新函数setState接受两个参数，第二个是props。所以，实际上，您将props 设置为状态。

【讨论】：

props 是updater function 中的第二个param。

【解决方案2】：

从您传递给setState 的函数中删除或重命名第二个参数。

this.setState( prevState => ({
    ...prevState,
    [type]: !prevState[type]
}));

或

this.setState( ( prevState, props ) => ({
    ...prevState,
    [type]: !prevState[type]
}));

传递给handleSwitch 的type 参数是您想要的值 - 在setState 中，type 设置为 React 传递给该函数的任何值，即 props。

【讨论】：

【解决方案3】：

updater 函数的第二个参数是组件当前的 props，一个对象。 React setState Docs

假设type 是一个道具，我怀疑你想要类似下面的东西：

handleSwitch = type => {

    this.setState((prevState, props) => ({
        ...prevState,
        [props.type]: !prevState[props.type]
    }));

};

或者，您打算使用传递给handleSwitch 的type 参数，在这种情况下：

handleSwitch = type => {

    this.setState((prevState, props) => ({
        ...prevState,
        [type]: !prevState[type]
    }));

};

【讨论】：