兄弟组件更新同一父组件状态失败问题排查

核心原因是React状态更新的异步批量特性：当同一渲染周期内多个子组件触发父组件的状态更新时，它们都基于当前渲染周期的旧状态进行修改，后执行的更新会直接覆盖前一个的结果。

你之前的写法里，每次调用更新函数时都是深克隆父组件当前的rowHeights状态，但这个状态在同一批次更新中不会实时更新——第一个单元格修改后，状态还没同步，第二个单元格拿到的还是初始的旧状态，自然只会保留第二个的高度值。

解决方法：改用函数式更新 #

把父组件中更新行高度的函数改成函数式更新，它会接收最新的状态快照作为参数，确保每次更新都基于当前最新的状态值，而不是闭包里的旧值。

比如原来的问题写法：

const updateRowHeight = (rowId, newHeight) => {
  const clonedHeights = deepClone(rowHeights);
  if (newHeight > clonedHeights[rowId]) {
    clonedHeights[rowId] = newHeight;
  }
  setRowHeights(clonedHeights);
};

改成函数式更新：

const updateRowHeight = (rowId, newHeight) => {
  setRowHeights(prevHeights => {
    // prevHeights是当前最新的状态快照
    const updatedHeights = {...prevHeights}; // 若为嵌套对象，替换成你的深克隆方法
    const currentHeight = updatedHeights[rowId] || 默认高度值;
    if (newHeight > currentHeight) {
      updatedHeights[rowId] = newHeight;
    }
    return updatedHeights;
  });
};

为什么这样有效？ #

React的setState函数式更新会把每次的更新逻辑加入队列，执行时会依次基于前一次更新后的最新状态计算下一个状态。这样两个单元格的更新请求会按顺序处理：第一个更新先基于初始状态修改，第二个更新再基于第一个修改后的状态对比，最终保留最大的高度值。

另外注意：如果你的rowHeights是嵌套复杂对象，要确保克隆prevHeights时是深克隆，避免意外修改原状态对象。

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