React:如何强制状态更改在 setState 之后发生

React: how to force state changes to take place after setState

本文关键字：setState 之后 何强制 状态 React      更新时间：2023-09-26

调用 setState 后如何强制在 React 中进行状态更新？

据我所知，下次调用渲染时，状态会有效更新。另外，forceUpdate()应该重新渲染组件并立即更新状态更改，对吗？然而，情况似乎并非如此。下面是一个示例。

handleSomeEvent(data) {
    this.setState({
        data: data
    })
    this.forceUpdate()
    // At this point state should be updated but it isn't
    this.props.consumeData(this.state.data) // consumeData will receive old data
}

如何确保在调用 consumptionData 之前实际更新状态？

> setState() 是异步的，因此您可以在回调中执行此操作：

handleSomeEvent(data) {
  this.setState({
    data: data
  }, () => this.props.consumeData(this.state.data)); // using `data` would work as well...
}

关于访问刚刚更改的状态，@Samuli Hakoniemi 的答案是文档中的首选方式 （iirc）。

我想说以下代码也应该在数据处理之前运行状态更改：

handleSomeEvent(data) {
    const _handleDataChange = async () => {
    this.props.consumeData(this.state.data) 
    }
    this.setState({data: data})
    _handleDataChange();
}

由于_handleDataChange是异步调用，因此应在（异步）setState 调用之后运行。

相关文章：