Est*_*ask 6 javascript static-analysis reactjs eslint
参考说明:
setState()并不总是立即更新组件。它可能会批量更新或将更新推迟到以后。这使得在调用setState()之后立即读取this.state可能是一个陷阱。而是使用componentDidUpdate或setState回调(setState(updater,callback)),确保在应用更新后均能触发这两种方法。如果需要基于先前的状态来设置状态,请阅读以下有关updater参数的信息。
因此在React中将this.state
值与一起使用是一个错误,setState
因为它setState
是异步的,并且可能导致使用错误的值更新状态(演示):
// destructured
const { state, setState } = this;
setState({ foo: state.foo });
// destructured
const { foo } = this.state;
setState({ foo });
// undestructured
this.setState({ foo: this.state.foo });
Run Code Online (Sandbox Code Playgroud)
虽然这是更新状态的正确方法(演示):
// destructured
this.setState(({ foo }) => ({ foo }));
// undestructured
this.setState(state => ({ foo: state.foo }));
Run Code Online (Sandbox Code Playgroud)
是否存在ESLint规则或其他方法来防止其中某些或所有情况this.state
被滥用?
我认为可能很难,但可以通过静态分析解决此问题。
eslint-plugin-react将使用react/no-access-state-in-setstate规则进行此检查
此规则应防止在 setState 调用中使用 this.state。当批量调用两个状态调用并因此引用旧状态而不是当前状态时,这样使用 this.state 可能会导致错误。
归档时间: |
|
查看次数: |
1960 次 |
最近记录: |