0

我有一个组件（显示列表）在更新道具（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() 会不停地触发。我怎样才能防止这种情况？？？？？任何帮助将不胜感激。

4

3 回答 3

0

可能通过调用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) { ... }.

于 2019-07-10T12:34:35.073 回答
0

这解决了问题：

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

      }
  }
于 2019-07-10T15:29:42.740 回答
0

我相信无限循环是由onFetchAction引起的。如果 onFetchAction 是一个导致 this.props.data 更新的函数，那么这个条件将始终为真，因此是无限循环。

 if(prevProps.data !== this.props.data){  //always true
     this.props.onFetchAction() //updates this.props.data
 }

您必须确保 onFetchAction 中发生的事情不会直接更新 this.props.data。

回应评论。

如果 onFetchAction 是更新 this.props.data 的东西，那么我认为你正在做的事情不会奏效。我会亲自在 componentWillMount 中设置 onFetchAction。然后，当您需要更新 this.props.data 时，在您需要的任何函数上调用 onFetchAction 。

componentWillMount() {
     this.props.onFetchAction()
}
于 2019-07-10T13:48:24.910 回答