React应用中newValues覆盖oldValues问题排查求助

问题描述 #

React应用里两个<ChangeList>组件分别传入oldValues和newValues，但内部的Google Maps组件始终渲染最后一个组件对应的位置值——默认显示newValues的位置，调换组件顺序后又全部显示oldValues的位置。怀疑问题出在normalizeChangesHistory函数，但初步看函数逻辑无明显问题。

排查步骤与解决方案 #

1. 先确认数据输出是否正确 #

先排除normalizeChangesHistory函数的问题，调用后打印输出值，验证newValues和oldValues的内容是否符合预期：

const { newValues, oldValues } = normalizeChangesHistory(changesHistory);
console.log('oldValues:', oldValues);
console.log('newValues:', newValues);

如果打印结果中两个数组的value字段确实是新旧不同的位置数据，说明问题不在数据处理函数，而是组件渲染层面的问题。

2. 检查组件的key属性是否缺失/重复 #

React渲染重复组件时，依赖唯一key区分不同实例。如果<ChangeList>或其内部的Google Maps组件没有设置唯一key，React会复用组件实例，导致状态被最后一个组件覆盖。

解决方法：

• 给两个<ChangeList>添加唯一key：

  <Flex padding="0 24px" width={"100%"} gap={"31px"} justifyContent="space-between">
    <ChangeList 
      key="old-values-list"
      items={oldValues} 
      title={T("laundry.changes_history.current")} 
      isCurrent={false} 
    />
    <ChangeList 
      key="new-values-list"
      items={newValues} 
      title={T("laundry.changes_history.required_updates")} 
      isCurrent={true} 
    />
  </Flex>
  

• 如果<ChangeList>内部渲染多个地图组件，给每个地图项添加唯一key（比如基于item.field或item.value）：

  // ChangeList内部渲染示例
  items.map(item => (
    <MapComponent 
      key={item.field} 
      position={item.value} 
    />
  ))
  

3. 检查地图组件的状态同步逻辑 #

如果Google Maps组件内部用本地状态存储位置，但没监听props变化更新状态，会出现状态不同步：

// 错误示例：仅初始化时设置状态，props更新后不同步
const MapComponent = ({ position }) => {
  const [mapPosition, setMapPosition] = useState(position);
  
  // ...地图渲染逻辑
}

修改为监听props变化更新状态：

const MapComponent = ({ position }) => {
  const [mapPosition, setMapPosition] = useState(position);
  
  useEffect(() => {
    setMapPosition(position);
  }, [position]); // 当position props变化时更新状态
  
  // ...地图渲染逻辑
}

或者直接使用props值，不维护本地状态：

const MapComponent = ({ position }) => {
  // 直接使用position props，避免状态不一致
  // ...地图渲染逻辑
}

4. 排查全局状态污染问题 #

如果地图组件依赖全局状态（如Redux、Context）存储位置，两个组件会共享同一状态，导致最后一个组件的设置覆盖前面的。这种情况需要：

• 将状态移至组件内部，改为私有状态
• 给每个地图实例分配独立的状态键（比如在全局状态中用对象存储，键为组件唯一标识）

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