我知道 this.state 不应该直接修改，而应该使用 setState。

由此我推断 prevState 也应该被视为不可变的，而 setState 应该总是看起来像这样:

this.setState((prevState) => {
  // Create a new object instance to return
  const state = { ...prevState };
  state.counter = state.counter + 1;
  return state;
});

或者更深的嵌套:

this.setState((prevState) => {
  // Create a new object instance to return
  const state = { ...prevState, counter: { ...prevState.counter } };
  state.counter.value = state.counter.value + 1;
  return state;
});

或者只是像 setState({}) 那样的部分更新，使用起来更容易也更好:

this.setState((prevState) => ({ counter: prevState.counter + 1 }));

以上所有内容显然都是正确的，因为它们返回了一个新实例，但后来我遇到了 this question where the accepted answer encourages mutating prevState without returning a new object instance (注意问题中的代码块)。

像这样:

this.setState((prevState) => {
  prevState.flag = !prevState.flag;
  return prevState;
});

我发现这是一个粗略的建议，所以我决定测试 prevState 和 this.state 的对象实例引用是否相同:

(The JSFiddle)

class Test extends React.Component {
  state = { counter: 0 };

  onDemonstrateButtonClick = (event) => {
    this.setState((prevState) => {
      if (prevState === this.state) alert(`uh, yep`);
      prevState.counter++;
      return prevState;
    });
  };

  render() {
    return (
      <div>
        <button onClick={this.onDemonstrateButtonClick}>Demonstrate</button>
        {this.state.counter}
      </div>
    );
  }
}

Whadayaknow，他们是!那是哪一个？答案是否错误，我应该返回一个新的对象实例还是将部分更新作为一个新对象返回，或者我可以直接改变 prevState 参数吗？如果是，这与直接改变 this.state 有什么不同？

旁注:TypeScript React 类型不会将参数标记为 ReadOnly，这只会让我更加困惑。

最佳答案

第一点

Is it okay to treat the prevState argument of setState's function as mutable?

答案是NO你永远不应该改变prevState，这在react documentation in setState section中也有明确提到。

• prevState is a reference to the previous state. It should not be directly mutated. Instead, changes should be represented by building a new object based on the input from prevState and props.

第二点:

您测试了 prevState 和 this.state，它们是相同的，但实际上它们不是。

要弄清楚为什么它们实际上不同，我们需要知道为什么 prevState 实际存在，答案是 setState 函数是异步的，这就是 react js 给出的原因我们访问 prevState 让我们检查下面的示例，其中 prevState != this.state

在下面的示例中，每次点击我们都会将计数器递增两次，但我们将使用 2 个 setState 操作，每个操作都会将计数器递增 1。

因为 setState 是 async 你会注意到第二个 setState 操作在第一个 setState 完成之前开始这就是 prevState 有用的地方，这里 prevState 和 this.state 不相等。

我在每一行注释了一个数字，表示该行何时执行，这应该可以解释为什么我们需要 prevState 以及为什么它不同于 this.state。

class App extends React.Component{
  constructor(props)
  {
    super(props);
    this.state = {
      counter : 1
    };
  }

  increment = () =>{
    this.setState((prevState , props) => {
      console.log("in first"); //3
      console.log(prevState);  //3
      console.log(this.state); //3
      if(prevState == this.state)
      {
         console.log("in first prevState == this.state");
      }
      return {
        counter : prevState.counter+1
      }
    } , ()=>{
      console.log("done updating first"); //5
    });


    console.log("after first"); //1

    this.setState((prevState, props) => {
      console.log("in second"); //4
      console.log(this.state);  //4
      console.log(prevState);   //4
      if (prevState == this.state) {
        console.log("in second prevState == this.state");
      }
      return {
        counter: prevState.counter + 1
      }
    } , () =>{
      console.log("done updating second"); //6
    });

    console.log("after second"); //2

  }

  render(){
    return (
      <div>
        <span>{this.state.counter}</span>
        <br/>
        <button onClick={this.increment} >increment</button>
      </div>
    )
  }
}

上面代码的结果是

"after first"
"after second"
"in first"
▶Object {counter: 1}
▶Object {counter: 1}
"in first prevState == this.state"
"in second"
▶Object {counter: 1}
▶Object {counter: 2}
"done updating first"
"done updating second"

上面的代码在这个链接中是完全有效的，你可以查看console.log结果 https://codesandbox.io/s/k325l485mr

上面的例子每次点击都会正确地增加计数器两次，如果你想打破它，改变第二个 setState 中的 return 语句

来自

return {
    counter: prevState.counter + 1
}

到

return {
    counter: this.state.counter + 1
}

而且你会发现结果不正确每次点击都会导致1个增量这是不正确的因为我们有2个setState，这是因为我们没有使用prevState 并且我们使用了不正确的 this.state

最后

我认为更新计数器的正确方法是

this.setState((prevState) => ({ counter: prevState.counter + 1 }));

关于javascript - 可以将 setState 函数的 prevState 参数视​​为可变的吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47339643/