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

Question

我的应用程序正在使用React 15，我们正在避免使用componentWillReceivePropsin 组件（因此在迁移到 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，规则是有意义的。

什么是替代（不禁用规则）......意味着我们应该在哪里设置状态以遵守此规则？

Answer 1

你可以试试getDerivedStateFromProps。

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

在这种情况下，如果您将从 props 获得新值，它将应用于您的状态。
但是 react 仅在版本 16 中具有此挂钩。
在 v15 中，您必须使用 componentWillReceiveProps 或 componentDidUpdate + setState 来完成。没有其他方法。