React数组状态排序后未触发组件重新渲染问题排查

问题根源 #

你代码里用的Array.sort()是原地修改数组的方法——它不会创建新数组，只是打乱原数组内部元素的顺序。React判断state是否变化是基于引用对比的，你调用setCountriesArr时传入的还是原数组的引用，React会认为数组没变化，自然不会触发组件重新渲染。

直接修复方案 #

修改排序逻辑，先复制原数组再排序，生成新的数组实例，让React能检测到state变化：

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;
  }
};

复制数组的方式还可以用prev.slice()或者Array.from(prev)，只要能生成新数组就行。

更优写法（推荐） #

其实没必要修改原始的countriesArr state，直接在渲染阶段根据sortBy动态生成排序后的数组，用useMemo缓存结果避免重复计算：

import { useMemo } from 'react';

// ...其他代码

const sortedCountries = useMemo(() => {
  // 先复制原始数组，避免修改原state
  const tempArr = [...countriesArr];
  switch (sortBy) {
    case sortBySwitchList.Alphabetically:
      tempArr.sort((a, b) => a.name.common.localeCompare(b.name.common));
      break;
    case sortBySwitchList.AlphabeticallyReversed:
      tempArr.sort((a, b) => b.name.common.localeCompare(a.name.common));
      break;
    default:
      break;
  }
  return tempArr;
}, [countriesArr, sortBy]);

// 渲染时使用排序后的数组
{sortedCountries.map((item) => (
  <CountryComponent
    key={item.name.common}
    flag={item.flags.png}
    name={item.name.common}
    population={item.population}
    region={item.region}
    capital={item.capital}
  />
))}

这种写法不用在useEffect里修改state，更符合React的状态管理原则，同时useMemo会在countriesArr或sortBy变化时才重新计算排序结果，性能更优。

内容的提问来源于stack exchange，提问作者user19786344