Question

我是新来的人，尝试此操作时遇到了问题。我在父状态下有一个二维数组，我将其映射到几个子组件中。我在父组件中有一个复选框，单击该复选框应获取所有子组件中的值并更新2d数组。我创建了一个函数来在父组件中执行此操作，并将其作为道具发送给所有子组件，但更改未反映在父组件中的2d数组中。仅更新数组中的第一个元素。请帮帮我。传递给子组件的函数是

    updateStudentScores = (
    index,
    test1,
    test2,
    exams,
    totals,
    grades,
    remks,
    SChek,
    bgrnd
  ) => {
    const elementsIndex = this.state.students.findIndex(
      (element) => element.RealIndex == index
    );

    let newArray = [...this.state.tempStudents];
    newArray[elementsIndex] = {
      ...newArray[elementsIndex],
      Cas1: test1,
      Cas2: test2,
      Exam: exams,
      Total: totals,
      Grade: grades,
      Remark: remks,
      stillChecked: SChek,
      background: bgrnd,
    };
    this.setState({ tempStudents: newArray });
  };

tempStudents是处于父组件状态的2d数组。感谢您的回复

Answer 1

之所以只更新第一个元素，是因为当第一个子组件更新2D数组时，它会更新父状态->将其作为更新的道具发送给所有子对象->导致所有子元素重新呈现并丢失所有输入的数据。

您还没有发布任何代码...但是最好的方法是每次孩子更改2D数组中的任何内容时都调用一个处理程序。（这很理想）

要获得预期的功能，您将需要复选框来更改作为道具传递给所有子组件的状态（使它们重新呈现），当发生这种情况时，您可以使用钩子或生命周期方法，例如“ componentDidMount（）”以调用具有更新数组所需的所有值的父级处理程序。

反应：从多个子组件更新父组件中的状态

1 个答案: