React Native中useEffect排序数组后渲染显示异常问题求助

你遇到的是状态更新异步性导致的渲染滞后，核心问题出在排序逻辑和状态更新的顺序上：

1. 页面初始化时未执行默认排序，所以显示原始未排序数据；
2. 点击排序按钮时，你可能先更新了排序字段的状态（比如setSortKey），然后立刻用这个sortKey去排序数据，但React的状态更新是异步的，此时sortKey还是更新前的旧值，导致排序用的是旧字段；
3. 等到下一次点击时，上一次的状态才完成更新，这时候排序用的是上一次想要切换的字段，就出现了“操作和显示错位”的情况。

从日志也能验证这点：每次排序用的字段都是上一次操作的目标值，而非当前点击的字段。

针对这几个问题，直接对应修改：

1. 初始化时执行默认排序 #

在组件加载完成后，直接对原始数据按first_name排序并设置到状态里：

useEffect(() => {
  // 基于原始数据创建新数组并排序
  const sorted = [...originalData].sort((a, b) => a.first_name.localeCompare(b.first_name));
  setSortedData(sorted);
}, []);

2. 用目标字段直接排序，不依赖刚更新的状态 #

点击排序按钮时，不要用当前的sortKey状态值，而是直接用点击要切换的目标字段来排序，再同步更新状态：

const handleSort = (targetKey) => {
  // 用传入的targetKey（比如'last_name'）直接排序
  const sorted = [...originalData].sort((a, b) => a[targetKey].localeCompare(b[targetKey]));
  setSortKey(targetKey);
  setSortedData(sorted);
};

3. 永远创建新数组，不要修改原数组 #

React靠引用变化检测状态更新，如果直接修改原数组（比如originalData.sort(...)），数组引用没变，React不会触发重新渲染。必须先拷贝原数组再排序，比如用扩展运算符[...originalData]或者Array.from(originalData)。

修改后：

• 页面加载时会直接显示按first_name排序的结果；
• 点击L按钮会立刻显示按last_name排序的数据；
• 点击F按钮会立刻切换回按first_name排序的结果，日志里的排序字段也会和当前操作一致。

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