Question

我有这样的生命周期钩子

componentDidUpdate(prevProps) {
    // Typical usage (don't forget to compare props):       

    if (prevProps.activeItems !== this.props.activeItems) {
      this.props.doAction();
    }
  }

道具具有这样的结构

[
  {id:1, hidden: true},
  {id:2, hidden: false}
  {id:3, hidden: true}
]

我需要检查每个对象的上一个和下一个道具中隐藏的属性是否相同，因此我将知道是否需要在if条件或no条件下运行函数。我该怎么办？

Answer 1

不要使用componentWillReceiveProps －这个钩子将很快被弃用。 componentDidUpdate是您所需的正确钩子。

问题在于您正在执行的比较是一个浅层比较-即它不比较各个数组中的嵌套值。

基本思想是，您应该遍历两个数组并比较各个嵌套的值-有关此的更多信息：How to compare arrays in JavaScript?

您还可以使用类似于lodash的isEqual方法在两个数组之间进行深度比较：https://lodash.com/docs/4.17.10#isEqual

Answer 2

充分利用componentWillReceiveProps。

  componentWillReceiveProps (nextProps) { 
      if(nextProps.something !== this.props.soemthing) {
           //write your statements
      }
  }

如果您有对象数组，则需要通过比较旧道具来遍历数组中的每个对象。

Answer 3

只有在Decimal元素发生变化的情况下，父组件才可以提供不可变的activeItems。

否则activeItems数组如果它们相等就需要测试，例如with recompose：

activeItems

Answer 4

您现在可以使用componentWillReceiveProps。因为它即将被弃用

   componentWillReceiveProps (nextProps) {
       if(nextProps.something === this.props.soemthing) {
           // do your work
       }
   }

如何在React中检查prevProps和nextProps是否相同？

4 个答案: