Question

我知道我不应该直接在React中改变状态，但是当我使用函数时情况如何：

onSocialClick = e => {
    const id = e.target.value;
    this.setState((prevState, props) => {
        prevState[id] = !(prevState[id]);
        return prevState;
    });
};

修改传递的对象是错误的吗？

修改

事实证明，我们大多数人在这里都错了。立即反映docs state it clearly：

state是对应用更改时组件状态的引用。它不应该直接变异。相反，应该通过基于state和props
的输入构建一个新对象来表示更改

感谢@TomášHübelbauer在评论中指出它。

Answer 1

更简洁的方法是直接引用您想要编辑的属性：

doIt = () => this.setState(({ [id]: prevValue }) => ({
  [id]: !prevValue,
}));

Answer 2

你这样做的方式并没有错。完全可以修改参数然后返回它。但是，当您根据prevState的值修改状态并且它完全适合您的场景时，将使用带有prevState参数的setState，并且更简洁的方式来处理它将是

onSocialClick = e => {
    const id = e.target.value;
    this.setState((prevState, props) => {
        return {[id] : !(prevState[id])};
    });
};

Answer 3

不，您不应在setState的更新程序功能中对prevState进行更改。

更新程序功能必须是纯函数

更新程序函数被调用两次。看到这个discussion

检查以下codesandbox并打开codeandbox的控制台以查看其运行情况。

Answer 4

直接改变国家是非常沮丧的。此外，你正在改变以前的状态，然后返回它没有多大意义。如果你想要的只是在state[id]切换状态，那么修改你的代码更像是：

onSocialClick = e => {
    const id = e.target.value;
    this.setState({this.state[id]: !this.state[id});
};

我可以改变传递给setState函数的状态吗？

4 个答案: