简单地说，就是这个。setState({data: value})是异步的 这意味着它会移出调用堆栈，只会返回 到调用堆栈，除非它被解析。

请阅读事件循环，以清楚地了解JS中的异步性质，以及为什么需要时间来更新-

https://medium.com/front-end-weekly/javascript-event-loop-explained-4cd26af121d4

因此,

    this.setState({data:value});
    console.log(this.state.data); // will give undefined or unupdated value

因为更新需要时间。 实现上述过程-

    this.setState({data:value},function () {
     console.log(this.state.data);
    });

您可以尝试使用ES7 async/await。举个例子:

handleChange: async function(event) {
    console.log(this.state.value);
    await this.setState({value: event.target.value});
    console.log(this.state.value);
}

正如React文档中提到的，没有保证setState被同步触发，所以你的console.log可能会在更新之前返回状态。

Michael Parker提到在setState中传递一个回调。另一种处理状态改变后逻辑的方法是通过componentDidUpdate生命周期方法，这是React文档中推荐的方法。

通常，我们建议对这种逻辑使用componentDidUpdate()。

当可能连续触发了setStates，并且您希望在每次状态更改后都触发相同的函数时，这特别有用。您可以将函数放置在componentDidUpdate中，而不是向每个setState添加回调，如果需要的话，在其中使用特定的逻辑。

// example
componentDidUpdate(prevProps, prevState) {
  if (this.state.value > prevState.value) {
    this.foo();  
  }
}

有时这种问题会发生在状态中。 对于钩子，你应该使用useEffect钩子，如下所示-

const [fruit, setFruit] = useState('');
 
setFruit('Apple');
useEffect(() => {
  console.log('Fruit', fruit);
}, [fruit])

这救了我的一天，希望会帮助你!!

简单地说，就是这个。setState({data: value})是异步的 这意味着它会移出调用堆栈，只会返回 到调用堆栈，除非它被解析。

请阅读事件循环，以清楚地了解JS中的异步性质，以及为什么需要时间来更新-

https://medium.com/front-end-weekly/javascript-event-loop-explained-4cd26af121d4

因此,

    this.setState({data:value});
    console.log(this.state.data); // will give undefined or unupdated value

因为更新需要时间。 实现上述过程-

    this.setState({data:value},function () {
     console.log(this.state.data);
    });

Async-await语法非常适合以下内容:

changeStateFunction = () => {
  // Some Worker..

  this.setState((prevState) => ({
  year: funcHandleYear(),
  month: funcHandleMonth()
}));

goNextMonth = async () => {
  await this.changeStateFunction();
  const history = createBrowserHistory();
  history.push(`/calendar?year=${this.state.year}&month=${this.state.month}`);
}

goPrevMonth = async () => {
  await this.changeStateFunction();
  const history = createBrowserHistory();
  history.push(`/calendar?year=${this.state.year}&month=${this.state.month}`);
}