在 React 中处理有状态对象数组

Question

我有一个有状态对象的数组（其中数组的大小或对象的属性都可以改变）。我最初的计划是有一个文本字段，用户可以在其中更改课程属性，但是当我开始实施代码时。我注意到函数 changeCourseAttribute 和整体代码变得比应有的复杂，所以我的问题是有没有办法更优雅地处理这个问题？

因为我目前的实现。例如，如果我有 < CourseComponent /> 我将不得不调用 changeCourseAttribute 传递它需要的所有参数，最重要的是它还会在所有组件上调用重新渲染是不必要的。

如果有人能帮忙，我将不胜感激。

import { React, useState } from "react";

class Semester {
  constructor(courses = []) {
    this.courses = courses;
  }
}

class Course {
  constructor(name = "", credits = "", grade = "") {
    this.name = name;
    this.credits = credits;
    this.grade = grade;
  }
}

const App = () => {
  const [semesters, setSemesters] = useState([new Semester()]);

  function addSemester() {
    setSemesters([...semesters, new Semester()]);
  }

  function removeSemester(semesterToBeRemoved) {
    if (semesters.length > 1) {
      setSemesters(
        semesters.filter((semester) => semesterToBeRemoved !== semester)
      );
    }
  }

  function addCourse(semesterToBeChanged) {
    setSemesters(
      semesters.map((semester) =>
        semester === semesterToBeChanged
          ? { ...semester, courses: [...semester.courses, new Course()] }
          : semester
      )
    );
  }

  function removeCourse(semesterToBeChanged, courseToBeRemoved) {
    if (semesterToBeChanged.courses.length > 1) {
      setSemesters(
        semesters.map((semester) =>
          semester === semesterToBeChanged
            ? {
                ...semester,
                courses: semester.courses.filter(
                  (course) => course !== courseToBeRemoved
                ),
              }
            : semester
        )
      );
    }
  }

  function changeCourseAttribute(
    semesterToBeChanged,
    courseToBeChanged,
    field,
    data
  ) {
    // This is just insanity..
  }

  return <div>{/* Rest of the code .. */}</div>;
};

export default App;