Question

只有在该对象的属性（作为道具！）发生变化时，是否有办法在组件更新后运行函数？

原始对象：

const employees = {
   employee1: {
      name: "John",
      age: "24"
   },
   employee2: {
      name: "Jane",
      age: "20"
   }
}

更新的对象（请注意，约翰的年龄已更改）：

const employees = {
   employee1: {
      name: "John",
      age: "25"
   },
   employee2: {
      name: "Jane",
      age: "20"
   }
}

内部子组件以员工为支柱：

   componentWillReceiveProps(nextProps) {
      const {employees} = this.props;

      if (nextProps.employees !== employees) {
         // Run function...
      }
   }

Answer 1

使用componentDidUpdate回调钩子。它可以访问(prevProps, prevState, ..)。

对于相等性测试，我将使用_.isEqual方法，因为该方法会在两个值之间进行深层比较以确定它们是否等效。

componentDidUpdate(prevProps) {
  const {
    employees
  } = this.props;

  if (!_.isEqual(prevProps.employees, employees)) {
    // Run function...
  }
}

注意：执行componentDidUpdate后将调用外观render()。因此，如果您要根据props验证关闭组件的渲染，那么shouldcomponentupdate将是正确的选择。

React-如果作为prop传递的对象的属性已更改，则运行函数

1 个答案: