javascript - 同时设置多个(相互依赖的)状态值

Question

想象一下这段代码:

class App extends React.Component {
  state = {
    name: "george",
    counter: 1
  };

  onClick() {
    this.setState({
      counter: 123,
      name: this.state.name + this.state.counter
    });


  }

  render() {
    return (
      <div
        className="App"
        onClick={() => {
          this.onClick();
        }}
      >
        <h1>Hello CodeSandbox</h1>
        <h2>{this.state.name}</h2>
        <h2>{this.state.counter}</h2>
      </div>
    );
  }
}

如果我单击 div ，输出为:

george1
123

您可以看到state.name的值为george1，其中包含当时当前的counter值onClick 被调用。不过，state.counter 值本身具有新值。

这怎么解释？因为如果我这样做:

 onClick() {
    this.setState({
      counter: 123
    });

    setTimeout(() => {
      this.setState({
        name: this.state.name + this.state.counter
      });
    }, 1000);
  }

现在输出是

george123
123

基本上是相同的代码，但时间不同。 那么如何解释这种行为呢？ 为什么在第一种情况下它会将 this.state.counter 的当前值(在点击时)嵌入到 this.state.name 中？ 在第二种情况下不是吗？

Demo .

<小时/>

我知道是否希望将 counter 的旧值嵌入到 this.state.name 中，并更新 this.state.counter >，我也可以这样做:

 onClick() {
    this.setState({ // even safer to use functional setState here
        name: this.state.name + this.state.counter
    }, ()=>{
       this.setState({ // and here
         counter:123
       })
    });


  }

它比第一种方法更安全吗(结果相同)？

Answer 1

您在两个示例中都使用了 counter 的值。不同之处在于计数器的值何时发生变化。在此示例中:

onClick() {
    this.setState({
      counter: 123,
      name: this.state.name + this.state.counter
    });

名称为 george1，因为 this.state.counter 仍设置为 1(尚未更新)。

在此示例中:

this.setState({
      counter: 123
    });

    setTimeout(() => {
      this.setState({
        name: this.state.name + this.state.counter
      });
    }, 1000);

您首先要更新 counter 的值，因此超时后 this.state.counter 将引用新值，因此 name 值将为 george123。

作为旁注，如果您需要在 setState 函数中引用状态，您应该使用回调，以便保证状态的正确值。