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

Question

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

    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 是父组件状态下的二维数组。感谢您的回复

Answer 1

它只更新第一个元素的原因是，当第一个子组件更新 2D 数组时，它会更新父级状态 -> 将其作为更新后的道具发送给所有子级 -> 导致所有子级重新渲染并丢失任何输入的数据。

您尚未发布任何代码...但最好的方法是在每次孩子更改二维数组中的任何内容时调用一个处理程序。 （这是理想的）

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