为什么在 componentDidUpdate 中使用 setState 在 React 中被视为不好的做法？

Question

当道具更新时，我需要更新孩子的状态，所以我做了这样的事情：

componentDidUpdate(prevProps) {
    const { searchValue, searchCriterion } = this.props;

    if (searchValue !== prevProps.searchValue) {
      this.setState({ searchValue });
    }
    if (searchCriterion !== prevProps.searchCriterion) {
      this.setState({ searchCriterion });
    }
  }

ESLint 的 airbnb 指南正在抱怨它并抛出这个警告，即使我看不到任何明显的渲染或性能问题。

警告说：

在组件更新后更新状态将触发第二次 render() 调用，并可能导致属性/布局抖动。

当道具具有新值时，是否有更好的方法来更新孩子的状态？

或者我应该忽略警告？

Answer 1

您的代码的问题是它可能会创建一个无限循环。 当您调用setState方法时，您会触发第二次render ，就像警告所说的那样，因此会触发一个新的componentDidUpdate 。

为了解决这个问题，您可能希望为状态的某些值创建一个中断条件以退出循环。 例如，您可以简单地使用如下标志：

componentDidUpdate(prevProps) {
const { searchValue, searchCriterion } = this.props;

if (this.state.isAlreadyUpdated === true) {
  this.setState({ isAlreadyUpdated: false });
  break;
} else {
  this.setState({ isAlreadyUpdated: true });
}

if (searchValue !== prevProps.searchValue) {
  this.setState({ searchValue });
}
if (searchCriterion !== prevProps.searchCriterion) {
  this.setState({ searchValue });
}

}