useEffect中if语句内排序无法首次生效的原因与解决方法

问题原因 #

首先明确React useEffect的执行规则：组件首次渲染完成后会执行一次，之后只有当依赖数组中的值发生浅变化时，才会再次触发执行。

回到你的代码场景：

1. 排序在条件语句外时：首次渲染后useEffect触发，不管sortBy.value是什么值，都会执行flights.sort(...)，所以排序在首次渲染就生效。
2. 排序放进if (sortBy.value === "PRICE_LOW")条件内时：如果组件首次渲染时sortBy.value的初始值不是PRICE_LOW，这个条件就不成立，排序代码根本不会执行。只有当后续sortBy.value被修改为PRICE_LOW时，依赖数组中的sortBy发生变化，useEffect才会再次触发，此时排序逻辑才会执行——这就是为什么你要等useEffect再次触发才能看到排序效果。

另外要注意：Array.sort()是原地修改数组的方法，如果你直接对状态中的flights数组执行sort，会直接修改原状态内容（虽然数组引用不变），这不符合React状态不可变的原则，还可能导致依赖数组判断异常，甚至引发无限循环。

解决方案 #

根据你的需求，分两种常见场景给出解决方式：

场景1：flights是组件内部状态 #

如果flights是用useState维护的内部状态，推荐在useEffect中基于原数组创建副本后排序，再更新状态：

const [flights, setFlights] = useState(initialFlightData);

useEffect(() => {
  // 创建数组副本，避免原地修改原状态
  const sortedFlights = [...flights];
  
  // 根据sortBy的不同值执行对应排序逻辑，覆盖所有可能的初始状态
  if (sortBy.value === "PRICE_LOW") {
    sortedFlights.sort((a, b) => a.price - b.price); // 低价在前
  } else if (sortBy.value === "PRICE_HIGH") {
    sortedFlights.sort((a, b) => b.price - a.price); // 高价在前
  }
  // 其他排序规则可以继续补充else if分支
  
  setFlights(sortedFlights);
}, [flights, sortBy]);

场景2：flights是props传入的外部数据 #

如果flights是父组件传入的props，不需要在当前组件维护状态，推荐用useMemo计算衍生的排序结果，这比useEffect更符合React的衍生状态处理逻辑：

const sortedFlights = useMemo(() => {
  const sorted = [...flights];
  
  if (sortBy.value === "PRICE_LOW") {
    sorted.sort((a, b) => a.price - b.price);
  } else if (sortBy.value === "PRICE_HIGH") {
    sorted.sort((a, b) => b.price - a.price);
  }
  
  return sorted;
}, [flights, sortBy]);

// 渲染时直接使用sortedFlights
return (
  <div>{sortedFlights.map(flight => <FlightItem key={flight.id} data={flight} />)}</div>
);

核心优化点 #

• 确保排序逻辑覆盖sortBy的所有可能值（包括初始值），避免首次渲染时逻辑缺失；
• 始终遵循React状态不可变原则，通过创建数组副本来执行排序，不要直接修改原数组；
• 衍生状态（如排序后的数组）优先用useMemo计算，减少不必要的副作用和渲染循环。

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