← Back to rules

react/no-will-update-set-state 正确性

它的作用

禁止在 componentWillUpdate 生命周期方法中使用 setState。

为什么这是不好的？

在组件更新阶段更新状态可能导致组件状态不确定，这是不允许的。 这可能会导致你的 React 应用出现意外行为和错误。

示例

此规则的错误代码示例：

var Hello = createReactClass({
  componentWillUpdate: function () {
    this.setState({
      name: this.props.name.toUpperCase(),
    });
  },
  render: function () {
    return <div>Hello {this.state.name}</div>;
  },
});

此规则的正确代码示例：

var Hello = createReactClass({
  componentWillUpdate: function () {
    this.props.prepareHandler();
  },
  render: function () {
    return <div>Hello {this.state.name}</div>;
  },
});

如何使用

要通过配置文件或 CLI 启用此规则，可以使用：

配置 (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/no-will-update-set-state": "error"
  }
}

CLI

oxlint --deny react/no-will-update-set-state --react-plugin

参考资料

• 规则源码