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

Question

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

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

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

编辑：

事实证明，我们大多数人都错了。React文档现在清楚地说明了这一点：

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。

更新函数必须是纯函数

updater 函数被调用了两次。查看此讨论

检查以下代码框并打开代码框的控制台以查看它的运行情况。

Answer 4

非常不鼓励直接改变状态。此外，您正在改变先前的状态，然后返回它，这没有多大意义。如果您想要的只是切换状态，state[id]那么将您的代码修复为更像：

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