防止this.state与setState一起使用

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被滥用?

我认为可能很难,但可以通过静态分析解决此问题。

sky*_*yer 3

eslint-plugin-react将使用react/no-access-state-in-setstate规则进行此检查

此规则应防止在 setState 调用中使用 this.state。当批量调用两个状态调用并因此引用旧状态而不是当前状态时,这样使用 this.state 可能会导致错误。