Question

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

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

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

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);
  }
}

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

Answer 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 }

更新父组件状态时，React子组件不会重新呈现

1 个答案: