React父组件从不同子组件调用更新函数时状态不一致的原因

问题描述 #

我有一个React父组件，用useState管理placedMarkers状态，该状态传递给多个Marker子组件，每个子组件都接收updatePlacedMarkers函数作为props。调用这个函数时发现，从不同子组件触发，打印的placedMarkers状态值不一样：第一个子组件触发只显示1条数据，第二个触发显示2条，以此类推。已确认marker ID唯一，状态能正确更新，想知道原因和解决办法。

相关代码片段 #

// 父组件代码
const [placedMarkers, setPlacedMarkers] = useState([]);

const updatePlacedMarkers = (markerProps, newPosition) => {
  console.log("placedmarker", placedMarkers);
};

{placedMarkers.map((marker) => (
  <Marker
    key={marker.id}
    position={marker.position}
    id={marker.id}
    icon={marker.icon}
    label={marker.label}
    draggable={true}
    optimized={false}
    placedMarkers={placedMarkers}
    updatePlacedMarkers={updatePlacedMarkers}
  />
))}

问题根源：闭包捕获旧状态 #

这是React函数组件中典型的闭包陷阱：

• 每次父组件状态更新（比如placedMarkers新增元素），组件会重新渲染，生成新的updatePlacedMarkers函数，这个新函数会捕获当前渲染周期的placedMarkers状态。
• 但之前渲染出来的Marker子组件，手里拿到的还是上一次渲染时的updatePlacedMarkers函数，这个函数捕获的是当时的旧placedMarkers值。
• 比如第一次添加marker后渲染的Marker组件，它的updatePlacedMarkers捕获的是长度为1的数组；第二次添加后新渲染的Marker，捕获的是长度为2的数组，所以不同子组件调用时打印的值不一样。

解决办法 #

1. 使用函数式更新获取最新状态 #

如果要在updatePlacedMarkers里依赖最新的placedMarkers做操作，直接用setState的函数式写法，它会接收最新的状态作为参数：

const updatePlacedMarkers = (markerProps, newPosition) => {
  setPlacedMarkers(prevMarkers => {
    // 在这里使用prevMarkers就是最新的状态
    console.log("最新placedmarker", prevMarkers);
    // 示例：修改对应marker的位置
    return prevMarkers.map(marker => 
      marker.id === markerProps.id ? {...marker, position: newPosition} : marker
    );
  });
};

2. 用useRef保存最新状态 #

如果只是需要在函数外部获取最新状态，可以用useRef来同步保存：

const [placedMarkers, setPlacedMarkers] = useState([]);
const markersRef = useRef(placedMarkers);

// 每次状态更新时同步ref的值
useEffect(() => {
  markersRef.current = placedMarkers;
}, [placedMarkers]);

const updatePlacedMarkers = (markerProps, newPosition) => {
  // 直接从ref里拿最新值
  console.log("最新placedmarker", markersRef.current);
};

3. 用useCallback包裹函数（配合子组件优化） #

如果子组件是纯组件（用React.memo包裹），为了避免不必要的重渲染，可以用useCallback包裹updatePlacedMarkers，结合函数式更新无需依赖外部状态：

const updatePlacedMarkers = useCallback((markerProps, newPosition) => {
  setPlacedMarkers(prevMarkers => {
    console.log("最新placedmarker", prevMarkers);
    return prevMarkers.map(marker => 
      marker.id === markerProps.id ? {...marker, position: newPosition} : marker
    );
  });
}, []); // 依赖为空，因为使用函数式更新获取最新状态

最佳实践 #

• 当更新状态依赖之前的状态时，优先使用函数式更新，这是React官方推荐的方式，能从根源避免闭包带来的旧值问题。
• 不要在子组件中直接存储父组件传递的状态快照，尽量通过回调函数获取最新状态。
• 循环渲染子组件时，配合useCallback和React.memo优化性能，避免因回调函数引用变化导致的子组件重复渲染。

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