react/no-did-update-set-state linter 规则替代答案

【问题标题】：react/no-did-update-set-state linter rule alternativereact/no-did-update-set-state linter 规则替代
【发布时间】：2020-03-20 15:02:41
【问题描述】：

我的应用程序正在使用React 15，我们正在避免在组件中使用componentWillReceiveProps（这样在迁移到 React 16+ 时工作量会减少）。记住这一点，根据之前的 props 设置 State 的合适位置是 componentDidUpdate。但是使用 linter 规则 react/no-did-update-set-state 我们得到以下错误：

error Do not use setState in componentDidUpdate react/no-did-update-set-state

从https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-did-update-set-state.md 的解释来看，规则是有道理的。

什么是替代（没有禁用规则）...表示我们应该在哪里设置状态以遵守此规则？

【问题讨论】：

getDerivedStateFromProps?它并不完美，但取决于您的使用案例
@blits getDerivedStateFromProps 在 React 15 中不可用。
您使用的规则应该适用于 React 16，而不是 15。在您的情况下，我会禁用此规则，直到您迁移到 React 16。
@blits reactjs.org/blog/2018/03/29/react-v-16-3.html 写于 2018 年 3 月 29 日。而github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/… 是在 2017 年 10 月 27 日修改的。所以，这是有原因的。
公平点，但它并不总是可以替换的。创建此规则是为了避免重复渲染。如果它是一些网络请求，你应该直接使用它，没有其他选择，因为它无论如何都会更新状态。

标签： reactjs eslint eslint-plugin-react

【解决方案1】：

你可以试试getDerivedStateFromProps。

  static getDerivedStateFromProps(props, state) {
    if (props.value) {
      return { ...state, value: props.value };
    }
    return state;
  }

在这种情况下，如果您将从 props 收到新值，它将应用于您的状态。
但是 react 只有 16 版才有这个钩子。
在 v15 中，您必须使用 componentWillReceiveProps 或 componentDidUpdate + setState。没有其他办法。

【讨论】：