为什么要使用 Object.assign() 来更新功能组件道具变化？

Question

我有一份学生名单，我将他们显示在 table 上。有两个按钮指示我应该按哪个值对列表进行排序（姓名或生日）。当单击按钮并对列表进行排序时，列表本身正在排序，但如果我不使用 Object.assign(newList, oldList) 将列表分配给新列表然后通过传递到更新状态来更新它，它不会更新函数 updateList(newList)。这是我的代码：

const students= [
  {
    name: "John Done",
    year: 1,
    birthdate: "2020-01-24",
  },
  {
    name: "Another Done",
    year: 3,
    birthdate: "2002-02-20",
  },
  {
    name: "Jack London",
    year: 2,
    birthdate: "1800-01-04",
  },
  {
    name: "Text Name",
    year: 3,
    birthdate: "1990-02-24",
  },
  {
    name: "Name",
    year: 2,
    birthdate: "2005-04-01",
  },
];

ReactDOM.render(<App students={students} />, document.getElementById('root'));

function App({ students }) {
  const [studentsList, setStudentsList] = useState(students);

  const sortByYear = () => {
    // let sortedstudents = [];
    // Object.assign(sortedStudents, studentsList);
    // sorteStudents.sort((a, b) => b.year - a.year);
    // console.log(sorteStudents);
    // setStudentsList(sortedStudents);
    studentsList.sort((a,b) => b.year - a.year));
    setStudentsList(studentsList);
  };

const sortByDates = () => {
  // let sortedStudents = [];
  // Object.assign(sortedStudents, studentsList);
  // sortedStudents.sort((a, b) => new Date(b.birthdate) - new Date(a.birthdate));
  // console.log(sortedStudents);
  // setStudentsList(sortedStudents);
  studentsList.sort((a, b) => new Date(b.birthdate) - new Date(a.birthdate));
  setStudentsList(studentsList);
};

return (
<div className="App">
  <div>
    <label>
      Sort By
    </label>
    <button
      onClick={() => sortByYear()}
    >
      Year
    </button>
    <button
      onClick={() => sortByDates()}
    >
      Most Old
    </button>
  </div>
  <Students students={studentsList} />
</div>
 );
}

学生部分

function Students({ students }) {
return (
    <div>
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Year</th>
            <th>Date of birth</th>
          </tr>
        </thead>
        <tbody>
          {students.map((student, index) => (
            <tr key={index}>
              <td>{student.name}</td>
              <td>{student.year.toString()}</td>
              <td>{student.birthdate}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

所以这里即使学生列表正在排序，状态也不会更新，但如果我将初始列表分配给新列表，然后对其进行排序，然后更新它正在工作的状态。

作品

let sortedStudents = [];
Object.assign(sortedStudents, studentsList);
sortedStudents.sort((a, b) => new Date(b.birthdate) - new Date(a.birthdate));
//console.log(sortedStudents);
setStudentsList(sortedStudents)

不起作用

studentsList.sort((a, b) => new Date(b.birthdate) - new Date(a.birthdate));
setStudentsList(studentsList);

所以问题是为什么我需要将我的 studentsList 分配给新数组，特别是通过使用 Object.assign() 以便 setStudentsList() 更新组件的状态？我刚开始学习 React，所以这些状态的实际工作方式让我很困惑。

我找到的类似帖子

React Functional Component props does not update
React functional components props value not updating
Re render functional component on props change

Answer 1

如Brain所述： React 根据前一个 props 与下一个 props 的相等性以及前一个状态与下一个状态的相等性来确定是否应该重新渲染。通过改变原始状态数组，先前的 studentList 与更新后的 studentList 具有引用相等性，并且 React 不会检测到它需要重新渲染。

因此，为了更改列表并让 React 检测更改，需要使用（变异）数组的 value，而不是其参考.

作为Bergi hinted: alternative that copies the array by value

为什么要使用 Object.assign() 来更新功能组件道具变化？

Why to use Object.assign() to update functional component props change?

javascript

reactjs

react-props

react-functional-component

学生部分

作品

不起作用