Question

我理解反应不会立即更新状态然后有人可以告诉我如何同步记录此状态，因为我的状态不是布尔值，这个答案对我没有帮助setState doesn't update the state immediately。另外我不明白为什么单击prev按钮后它会先递增值然后递减

    class A extends Component {
      constructor(props) {
        super(props);
        this.state = {
          value: 1
        }
      }


      handleNext() {
        this.setState(prevState => ({
          value: prevState.value + 1
        }));
        console.log(this.state.value);
      }

      handlePrev() {
        if(this.state.value > 1) {
          this.setState(prevState => ({
            value: prevState.value - 1
          }));
        }
        console.log(this.state.value);
      }

     render() {
       <Button bsStyle="primary" id="prev" onClick={() => this.handlePrev()}>Prev</Button>
       <Button bsStyle="primary" id="next" onClick={() => this.handleNext()}>Next</Button>
}

Answer 1

setState的第二个参数是在状态更新后执行的回调。

  handleNext() {
    this.setState({ value: this.state.value + 1 }, () => ({
      console.log(this.state.value);
    });
  }

来自the setState docs：

setState（）的第二个参数是一个可选的回调函数，它将在setState完成并重新呈现组件后执行。通常我们建议使用componentDidUpdate（）代替这种逻辑。

Answer 2

setState将回调作为其第二个参数。

handleNext() {
   this.setState(prevState => ({
          value: prevState.value + 1
        }),() => console.log('updated', this.state.value));

      }

Answer 3

您的代码很好，请尝试在渲染功能中打印this.state.value。

示例：

class A extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 1,
    };
  }

  handleNext() {
    this.setState(prevState => ({
      value: prevState.value + 1,
    }));
  }

  handlePrev() {
    if (this.state.value > 1) {
      this.setState(prevState => ({
        value: prevState.value - 1,
      }));
    }
  }

  render() {
    const { value } = this.state;
    return (
      <div>
        <h2>{ value }</h2>
        <button id="prev" onClick={() => this.handlePrev()}>Prev</button>
        <button id="next" onClick={() => this.handleNext()}>Next</button>
      </div>
    );
  }
}

似乎你的handlePrev正在递增然后递减，因为你经常打印以前的状态。因此，当您递减时，您将打印上一个增量的结果。

|---------------------|-------------------------|
|    Current State    |     Your console.log    |
|---------------------|-------------------------|
|          1          |                         | init
|---------------------|-------------------------|
|          2          |            1            | increment
|---------------------|-------------------------|
|          3          |            2            | increment
|---------------------|-------------------------|
|          2          |            3            | decrement
|---------------------|-------------------------|

我如何同步调用此状态？

3 个答案: