React 不會在 state 更新上重新渲染

Question

我在 state 的基礎上顯示組件，這是一個數組。 當我試圖對這個 state 進行排序時，它不會重新渲染基於它呈現的組件。 我想在 sortBy state 的基礎上進行排序，所以當它被更改時（使用 select），我使用 useEffect() 調用排序 function。 我究竟做錯了什么？

const sortCountries = () => {
    switch (sortBy) {
      case sortBySwitchList.Alphabetically:
        setCountriesArr((prev) =>
          prev.sort((a, b) =>
            a.name.common < b.name.common
              ? -1
              : a.name.common > b.name.common
              ? 1
              : 0
          )
        );
        break;
      case sortBySwitchList.AlphabeticallyReversed:
        setCountriesArr((prev) =>
          prev.sort((a, b) =>
            a.name.common < b.name.common
              ? 1
              : a.name.common > b.name.common
              ? -1
              : 0
          )
        );
        break;
      default:
        return;
    }
  };
  const changeSortBy = (e) => {
    setSortBy(e.target.value);
  };

  useEffect(() => {
    sortCountries();
  }, [sortBy]);
***part in which I am rendering***
{countriesArr.map((item) => {
          return (
            <CountryComponent
              key={item.name.common}
              flag={item.flags.png}
              name={item.name.common}
              population={item.population}
              region={item.region}
              capital={item.capital}
            />
          );
        })}

Answer 1

Sort確實對 Array 進行了就地排序（改變了原始數組），因此請對其進行復制，然后像這樣進行排序..

你正在做的其他sort也是如此:)

setCountriesArr((prev) =>
      [...prev].sort((a, b) =>
        a.name.common < b.name.common
          ? -1
          : a.name.common > b.name.common
          ? 1
          : 0
      )
    );