javascript - React 中的 useState() 不更新数据 - 这是 sort() 问题吗？

Question

当我在网站加载后单击按钮对有关国家/地区的数据进行排序时，数据显示正确。但是，当我想按不同的值再次对其进行排序时，数据不会更新，状态也不会更新，但是该函数运行良好，因为我可以看到控制台中的结果已正确排序。这种奇怪行为的原因是什么？感谢您抽出时间。

 function AllCountries({ countries }) {
  const [sortedCountries, setSortedCountries] = useState([]);

  useEffect(() => {
      console.log(sortedCountries)
  }, [sortedCountries])

  const sortResults = (val) => {
    let sortedResults = countries.sort((a, b) => {
      if (val === "deaths") {
        return b.TotalDeaths - a.TotalDeaths;
      } else if (val === "cases") {
        return b.TotalConfirmed - a.TotalConfirmed;
      } else if (val === "recovered") {
        return b.TotalRecovered - a.TotalRecovered;
      }
    });
    console.log(sortedResults);
    setSortedCountries(sortedResults);
  };

  return (
    <div className="all-container">
      <p>Sort countries by the highest number of:</p>
      <button onClick={() => sortResults("deaths")}>Deaths</button>
      <button onClick={() => sortResults("cases")}>Cases</button>
      <button onClick={() => sortResults("recovered")}>Recoveries</button>
      <ul className="all-countries">
        {sortedCountries.map((country, key) => {
          return <li key={key}>{country.Country}</li>;
        })}
      </ul>
    </div>
  );
}

export default AllCountries;

Answer 1

Array.sort() 方法不返回新引用，它返回相同的引用。因此，我假设在 sortedCountries 状态中存储了相同的 props.countries 引用，这就是为什么第二个按钮单击不会设置状态(它是相同的引用)，我可以为您提供简单的解决方案，只需更改此行 setSortedCountries(sortedResults) 与此 setSortedCountries([...sortedResults]) 在这种情况下，sortedResults 的副本将传递给 setSortedCountries (新引用)。