React State未正确分配setState

Question

我正在创建一个非常基本的待办事项应用。但我遇到了将待办事项推入阵列并将其分配给州的问题。

  constructor(props){
    super(props);
    this.state = {
      todo : '',
      todos : []
    };
  };

  todoValue(todo){
    console.log(`Received the todo in the App : ${todo}`);
    this.setState({todo});
    console.log(this.state.todo);
  }

当我点击一个按钮时，我在todo功能的todo参数中接收todoValue值。但它并没有在事件中分配给州。它确实将值赋给下一个事件的状态。

例如，如果我在第一个事件中收到todo值为one，而在下一个事件中收到todo值为two，这就是我得到的。

我想将todo值分配给按钮点击状态（不是下一个事件）

如何解决这个问题？

Answer 1

操作完成后，

setState is an async operation but it does allow a callback to be triggered。将您的代码更改为

this.setState({ todo }, () => console.log(this.state.todo));

并且您将看到您对州所做的最新更改。

Answer 2

setState是异步的，因此react可以批量调用几个setState以提高性能。

如上所述，使用setState的回调函数或componentLifeCycle componentDidUpdate