更新父組件 state 時反應子組件不重新渲染

Question

我有一個父組件，我在該組件的 state 中更新 object 上的嵌套屬性。 這是 state 中的 object：

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

在下面的方法中，我正在更新classObject object 中的數組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);
  }
}

我做錯了什么，如何制作一個組件來使用新道具更新 state？

Answer 1

您可以在componentDidMount中設置默認的 state 。

例如

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 }