useSelector获取Redux数据后未传递最新props给子组件的原因

你的代码存在两处React状态使用的典型错误，切断了Redux状态到子组件渲染的更新链路，和Redux本身的数据流逻辑无关：

• 父组件冗余本地状态未同步Redux更新
• 子组件副作用依赖配置错误，未响应props变化

父组件问题 #

你在父组件中写了如下逻辑：

// 从Redux拿到最新的食物列表
const food = useSelector((state) => state.foodList.food);
// 把Redux值作为初始值存到本地状态
const [foodList, setFoodList] = useState(food);

useState接收的初始参数仅在组件首次挂载时生效一次。后续接口返回数据、Redux状态更新触发父组件重渲染时，本地状态foodList不会自动同步food的最新值，你传给子组件的始终是组件首次挂载时存入的空数组初始值——这也是为什么你在父组件打印food能看到最新数据，但子组件拿不到的核心原因之一。

修正方式 #

直接删除这层冗余的本地状态，把从Redux取到的值直接传给子组件即可：

// 删除 const [foodList, setFoodList] = useState(food);
// 渲染时直接传food
<MenuList foodList={food ?? []} page={page} />

子组件问题 #

就算你修完父组件的问题，子组件当前的逻辑也不会响应props更新，问题出在这段代码：

const DUMMY_FOOD = props.foodList;
const [foodList, setFoodList] = useState([]);

useEffect(() => {
  setFoodList(formatArray(DUMMY_FOOD));
}, []);

这里的useEffect依赖数组为空，代表这个格式化数组的逻辑仅在子组件首次挂载时执行一次。后续父组件传入最新的foodList prop时，这个副作用不会重新执行，子组件本地的foodList状态始终是初始空数组，自然不会触发列表渲染。

修正方式 #

二选一即可：

1. 去掉冗余本地状态，渲染时通过useMemo计算分页数据，避免不必要的重计算：

   // 删除本地foodList状态和对应useEffect
   const pagedFoodList = useMemo(() => formatArray(props.foodList), [props.foodList]);
   // 渲染时直接用pagedFoodList
   

2. 给useEffect补上正确的依赖项，props变化时重新执行格式化逻辑：

   useEffect(() => {
     setFoodList(formatArray(DUMMY_FOOD));
   }, [DUMMY_FOOD]);
   

额外隐患 #

你在排序逻辑里直接调用Array.sort处理props传入的数组：

sort === "asc"
  ? (DUMMY_FOOD = DUMMY_FOOD.sort((a, b) => a.foodPrice - b.foodPrice))
  : (DUMMY_FOOD = DUMMY_FOOD.sort((a, b) => b.foodPrice - a.foodPrice));

Array.sort是原地修改方法，会直接改动原数组引用。React中禁止直接修改props、Redux store中的引用值，会导致状态变更检测失效、渲染异常。排序前请先拷贝原数组：

const sortedList = [...DUMMY_FOOD].sort(/* 你的排序逻辑 */)

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