更新父组件状态时反应子组件不重新渲染答案

【问题标题】：React child component not rerendering when updating parent component state更新父组件状态时反应子组件不重新渲染
【发布时间】：2019-11-04 15:50:53
【问题描述】：

我有一个父组件，我在该组件的状态下更新对象的嵌套属性。这是状态中的对象：

this.state = {
  classObject: {
    description: {...}, // class description
    mergedClasses: [{
      partialClass: {...}, 
      description: {...}
    }]
  }
}

在下面的方法中，我正在更新 classObject 对象内的数组 mergedClasses：

onUpdatingClasses() {
  this.setState(prevState => {
    const classes = prevState.selectedClasses
      .map(selectedClass => {
        const classObject = prevState.class.mergedClasses.find(classObject => selectedClass.id === classObject.id);
        return classObject
          ? {...classObject}
          : {partialClass: selectedClass});

    return {
      classObject: {
        ...prevState.classObject,
        mergedClasses: classes,
      }
    };
  });
}

然后在组件链中，我有一个带有选项卡的子组件，并从mergedClasses 数组呈现这些类之一。默认情况下，我将数组中的第一个元素设置为渲染。我通过将选项卡的值设置为该数组中第一个元素的索引来做到这一点，如下所示：

state = {
  value: this.props.classObject.mergedClasses[0].partialClass.id,
};

只要我不更新数组的第一个元素，它就可以正常工作。然后组件崩溃，因为该值没有使用新的第一个元素 id 进行更新。我曾尝试检查 componentDidUpdate 方法中的道具，但我在 devtools 中看到它永远不会被调用。

componentDidUpdate(prevProps) {
  if(prevProps.classObject.mergedClasses[0].partialClass.id !== this.props.classObject.mergedClasses[0].partialClass.id) {
    this.setState({value: 
    this.props.classObject.mergedClasses[0].partialClass.id);
  }
}

我做错了什么，如何制作组件以使用新道具更新状态？

【问题讨论】：

您将const 命名为class。 const class = 'invalid identifier'
对不起，这只是我的错误，当我翻译变量时，在代码中它是不同的
在哪里更新数组的第一个元素？
为什么从地图返回两次？
@Dupocas 我没有从地图返回两次，我在地图中返回一次，在 setState 中返回一次

标签： javascript reactjs

【解决方案1】：

您可以在componentDidMount中设置默认状态。

例如

componentDidMount() {
  const {
    classObject: { mergedClasses: [{ partialClass: { id } = {} }] = [{}] } = {},
  } = this.props;
  // now you have no undefined values
  this.setState({ value: id });
}

如果您使用类，也可以使用defaultValues，如

  state: { ... }
...
  defaultValues: { ... // describe default values here if not set }

【讨论】：