反应中的 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()方法不返回新引用，它返回相同的引用。所以我假设在sortedCountriesstate 中存储了相同的 props.countries 引用，这就是为什么第二个按钮单击不设置状态（它是相同的引用），我可以给你简单的解决方案，只是在这种情况下setSortedCountries(sortedResults)用这个更改这一行setSortedCountries([...sortedResults])复制的 sortedResults 将被传递给setSortedCountries（新参考）。

Answer 2

让 sortedResults = countries.sort此行正在对国家道具进行排序并将 sortedResults 设置为该指针让我们假设指针保存在 mem |0001|&nbsp;为简单起见第一次单击后，该函数被触发，道具被排序，并通过 setSortedCountries（设置状态）设置 sortedResults。这会触发您想要的渲染，因为之前的状态是未定义的，现在状态指向 |0001|当您的函数再次运行时，排序函数将触发，并在 |0001| 上工作&nbsp;并返回——你猜对了——|0001|&nbsp;但是使用新的排序数组。当你第二次去设置状态时，实际上并没有改变任何状态，因为之前的国家是 |0001|&nbsp;而你想改成的国家是|0001|那么我们能做些什么对我的好先生呢？首先，我需要您考虑一下这个问题，想想如何解决这个问题并尝试应用一些更改。您可以尝试做的是将国家道具复制到具有相同值的新数组指针，然后对其进行排序，然后将 sortedCountries 状态设置为该列表。那有意义吗？顺便说一句，这也是出于类似的原因，如果您尝试直接在新对象状态上设置状态，新对象状态将完全等于您设置的状态。这里没有任何真正的魔法。React 不会自动合并你以前的对象状态和新的对象状态，除非你明确告诉它这样做。从某种意义上说，您已经告诉 react 检查两个州之间的差异，一个旧国家和一个新国家（在 Vdom 的幕后），但是对于反应，这两个国家没有区别。并且由于两个对象状态没有区别，因此不会有实际的 DOM 更改。因此，您将指针设置两次不会产生实际变化。因此，您必须将 state 设置为具有新值的实际新指针，以便 react 虚拟 dom 可以比较两个状态（以前的国家列表）和新的国家列表。希望有帮助

Answer 3

这在 React 中有点问题，另一种解决方案是使用useReducer。如下所示：function reducer(state, action) {&nbsp; &nbsp;return [...state, ...action];}&nbsp;function AllCountries({ countries }) {&nbsp; const [sortedCountries, setSortedCountries] = useReducer(reducer, []);&nbsp; useEffect(() => {&nbsp; &nbsp; &nbsp; console.log(sortedCountries)&nbsp; }, [sortedCountries])&nbsp; const sortResults = (e, val) => {&nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; let sortedResults = countries.sort((a, b) => {&nbsp; &nbsp; &nbsp; if (val === "deaths") {&nbsp; &nbsp; &nbsp; &nbsp; return b.TotalDeaths - a.TotalDeaths;&nbsp; &nbsp; &nbsp; } else if (val === "cases") {&nbsp; &nbsp; &nbsp; &nbsp; return b.TotalConfirmed - a.TotalConfirmed;&nbsp; &nbsp; &nbsp; } else if (val === "recovered") {&nbsp; &nbsp; &nbsp; &nbsp; return b.TotalRecovered - a.TotalRecovered;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp; console.log(sortedResults);&nbsp; &nbsp; setSortedCountries(sortedResults);&nbsp; };&nbsp; return (&nbsp; &nbsp; <div className="all-container">&nbsp; &nbsp; &nbsp; <p>Sort countries by the highest number of:</p>&nbsp; &nbsp; &nbsp; <button onClick={(e) => sortResults(e, "deaths")}>Deaths</button>&nbsp; &nbsp; &nbsp; <button onClick={(e) => sortResults(e, "cases")}>Cases</button>&nbsp; &nbsp; &nbsp; <button onClick={(e) => sortResults(e, "recovered")}>Recoveries</button>&nbsp; &nbsp; &nbsp; <ul className="all-countries">&nbsp; &nbsp; &nbsp; &nbsp; {sortedCountries.map((country, key) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return <li key={key}>{country.Country}</li>;&nbsp; &nbsp; &nbsp; &nbsp; })}&nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; </div>&nbsp; );}export default AllCountries;