Question

我正在尝试设置组件中某个状态键的值。州看起来像这样：

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
    }

Answer 1

根据docs，setState的更新函数接受两个参数，其次是props。实际上，您将props设置为州。

Answer 2

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

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

或

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

传递给type的{{1}}参数是你想要的值 - 在handleSwitch内，setState设置为React传递给该函数的任何值，{{1 }}

Answer 3

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

我怀疑你想要更像下面这样的东西，假设type是道具：

handleSwitch = type => {

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

};

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

handleSwitch

设置新状态和使用setState更改旧状态之间的区别

3 个答案: