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

当道具更新时，我需要更新孩子的状态，所以我做了如下操作：

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

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

ESLint的airbnb指南对此表示不满，尽管我看不到任何明显的渲染或性能问题

警告说：

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

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

---

或者我应该忽略警告吗？

代码的问题是它可能会创建一个无限循环。调用

setState

方法时，会触发第二次

render

，就像警告所说的那样，并因此触发一个新的

组件diddupdate

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

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 });
}

---

}

可以，但如果没有防护装置，将导致无限循环。看起来你在道具和状态中使用了相同的值。那为什么要设州？这是一个很好的观点。。。我真的不需要，谢谢你指出。但是，如果有根据道具更新状态的理由，有没有办法在不收到此警告的情况下执行此操作？标记为警告，如果您已安全检查您的警卫未创建更新周期，则可以忽略。就

searchValue

prop的存储与@bubulledu93达成一致。在道具和状态中复制数据是一种反模式。你可以简单地从

这里读取
searchValue
。props

在你需要它的地方，它不会延迟渲染周期。忽略我正在复制数据的事实（我现在在我的代码中使用

this.props

），等式检查是否足以防止无限循环？似乎有多篇关于这个主题的文章。这要视情况而定。挂钩使

useffect

更容易使用，我知道你在这里做什么，以及它如何防止无限循环，谢谢你在标志上的解释！