React:如何在setState之后强制进行状态更改

Tuo*_*nen 1 html javascript css design-patterns reactjs

如何在调用setState后强制在R​​eact中进行状态更新?

据我所知,下次调用render时状态会有效更新.此外,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
}
Run Code Online (Sandbox Code Playgroud)

在调用consumeData之前,如何确保状态实际更新?

zvo*_*ona 8

setState() 是异步的,所以你可以在回调中做到这一点:

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

  • 很安全,AFAIK。但这可能不是最佳实践,因为建议使用应用程序级别状态(使用 redux)。因此,您可能可以避免将 `consumeData` 作为来自父级的道具传递。 (2认同)