数组State更新后从子组件向父组件传值为何获取到前一个状态实例？

算力阿峰

2026-10-5

问题原因

React 中的状态更新函数（如代码中的setIngredientList）是异步批量执行的：调用更新函数后，不会立即修改当前作用域下的ingredientList变量，需要等当前所有同步代码执行完成、组件触发下一次渲染时，状态才会更新为最新值。因此你在调用setIngredientList后立即将ingredientList传给父组件，拿到的永远是当前渲染周期的旧值。

可行解决方法

方法1：直接构造最新状态值传递，不需要依赖更新后的状态变量
你可以先把要更新的新数组构造出来，同时传给状态更新函数和父组件的回调，修改后的代码如下：
```
const listChangeHandler = (e) => {
  e.preventDefault();
  // 先构造最新的数组
  const newList = [...ingredientList, ingredient];
  setIngredientList(newList);
  inputIngredient.current.value = "";
  // 直接传新构造的数组给父组件
  props.data(newList);
};
```
如果担心有其他并发更新导致状态不准，可以保留函数式更新写法，把构造逻辑写在更新函数里同时把新值存下来即可。
方法2：通过useEffect监听状态变化后同步给父组件
如果只要ingredientList发生变化就需要同步给父组件，可以单独加一个副作用监听：
```
useEffect(() => {
  props.data(ingredientList);
}, [ingredientList, props.data]);
```
这种方式不用修改原有点击事件的逻辑，只要状态更新完成触发重渲染，就会自动把最新值传给父组件。
方法3：使用flushSync强制同步更新（不推荐常规场景使用）
如果你有特殊需求必须让状态立即更新，可以用ReactDOM的flushSync包裹状态更新逻辑，但这种方式会跳过批量更新优化，可能影响性能，非必要不要使用。