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);
  }

在这里，当我单击按钮时，我在 todoValue 函数的 todo 参数中收到 todo 值。但它不会分配给事件的状态。它确实将值分配给下一个事件的状态。

例如，如果我在第一个事件中收到待办事项值 one，在下一个事件中收到待办事项值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的回调函数，要么使用componentLifeCyclecomponentDidUpdate

React State 未使用 setState 正确分配

React State is not assigning properly with setState

javascript

setstate

reactjs