时间戳

首页 > 解决方案 > componentDidUpdate 导致无限循环

reactjs - componentDidUpdate 导致无限循环

问题描述

我有一个组件（显示列表）在更新道具（redux）之前呈现（有新项目添加到列表中并且应该显示但它不是，除非重新加载应用程序）。我写这个是为了防止这种行为：

  shouldComponentUpdate(nextProps, nextState) {
    if (this.props.data === nextProps.data) {
      return false;
    } else {
      return true;
    }
  }
  componentWillUpdate(prevProps){
      if(prevProps.data !== this.props.data){
         this.props.onFetchAction()
      }
  }

它在渲染之前使组件更新，但是在控制台上 onFetchAction() 会不停地触发。我怎样才能防止这种情况？？？？？任何帮助将不胜感激。

标签： reactjsreact-nativereact-reduxreact-lifecycle-hooks

解决方案

可能通过调用this.props.onFetchAction()You're updates props.data。您在存储什么类型的数据this.props.data？如果它是一个对象，那么您是通过引用而不是数据进行比较。这就是为什么prevProps.data !== this.props.data将永远存在false，并且您将有一个不定式循环。

您可以使用库的isEqual( https://lodash.com/docs/4.17.14#isEqual ) 方法lodash。此方法将通过其中的数据而不是引用来检查两个对象。所以代码看起来像：if (!isEqual(prevProps.data, this.props.data) { ... }.

推荐阅读