直接状态修改¶

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

点击查看 CodeQL 仓库中的查询

React 组件具有一个 state 属性。此属性包含与组件相关联的数据，这些数据可能会随着时间的推移而发生变化。虽然可以自由读取状态对象的属性，但你不应该直接更新它们，因为此类修改可能会被 setState 执行的异步更新覆盖。

建议¶

重写代码以使用 setState。

示例¶

以下示例组件使用 setInterval 将方法 tick 注册为回调函数，该回调函数每秒调用一次，并直接更新 state.now

class Clock extends React.Component {
  componentDidMount() {
    setInterval(() => this.tick(), 1000);
  }
  tick() {
    this.state.now = Date.now();
  }
}

相反，应该使用 setState

class Clock extends React.Component {
  componentDidMount() {
    setInterval(() => this.tick(), 1000);
  }
  tick() {
    this.setState({ now: Date.now() });
  }
}

参考资料¶

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

©GitHub, Inc.
条款
隐私