useState() 如何在这里更新我的数据？奇怪的

Question

我有来自 movie-api 的数据，我想根据 select 菜单进行排序，可以按年份降序排列，也可以按标题字母顺序排列。

虽然我只在排序函数中更新状态，没有在任何地方使用变量，但已经映射出的数据在不同的数组中会相应地更新。我猜它与两个不同变量中的每一个的第一次状态变化有某种关系？

知道我应该如何正确解决这个问题以及为什么会这样吗？

 const sortData = (e) => {
    if (e === "year"){

      const yearData = data.sort(function(a, b) {
        const yearA = a.Year;
        const yearB = b.Year;
        if (yearA < yearB) {
          return -1;
        }
        if (yearA > yearB) {
          return 1;
        }
        return 0;
      });
      setYearData(yearData);
      }
    if (e === "title") {
    
      const titleData = data.sort(function(a, b) {
        const titleA = a.Title.toUpperCase();
        const titleB = b.Title.toUpperCase();
        if (titleA < titleB) {
          return -1;
        }
        if (titleA > titleB) {
          return 1;
        }
        return 0;
      });
      setTitleData(titleData);
      

    }
  }

Answer 1

Array.sort()，在你的例子中 data.sort() 更新除了返回原始数组。似乎您的 data 变量是某种全局变量，在 sort() 期间发生了变化。

Answer 2

sort() 方法就地对数组的元素进行排序，因此数据（状态）在没有使用 setState 的情况下发生了变化（这可能会导致执行过程中发生一些不可预测的情况）

您可以在数组的副本上使用 sort() 方法，因此它不会影响您的状态数组，我想这个更改可能会起作用：

使用[...data].sort(...)代替data.sort(...)

useState() 如何在这里更新我的数据？奇怪的

How is useState() updating my data here? STRANGE

reactjs

use-state