潜在的不一致状态更新¶

ID: js/react/inconsistent-state-update
Kind: problem
Security severity: 
Severity: warning
Precision: very-high
Tags:
   - reliability
   - frameworks/react
Query suites:
   - javascript-security-and-quality.qls

点击查看 CodeQL 代码库中的查询

使用 `setState 更新 React 组件状态可能会异步更新 `this.props 和 `this.state，因此在计算传递给 `setState 的新状态时，不应使用这两个中的任何一个。

建议¶

使用 `setState 的基于回调的变体：而不是直接计算新状态并将其传递给 `setState，而是传递一个回调函数，该函数在更新即将执行时计算新状态。

示例¶

以下示例使用 `setState 更新 `this.state 的 `counter 属性，依赖于该属性的当前（可能过时）值

this.setState({
  counter: this.state.counter + 1
});

相反，应该使用 `setState 的回调形式

this.setState(prevState => ({
  counter: prevState.counter + 1
}));

参考资料¶

React 快速入门：状态和生命周期。

©GitHub, Inc.
条款
隐私