React中ReactGoogleAutocomplete新增对象覆盖旧对象问题求助

核心错误原因 #

1. 状态更新依赖旧值，未使用函数式快照 #

你的代码直接引用当前作用域的recentActivity构建新数组，但如果这个值是闭包捕获的旧状态（比如类组件回调里的旧值、函数组件未正确依赖状态），会导致每次更新都基于初始状态添加新元素，而非最新状态。比如初始shipAddress是[{name: ''}]，每次选地址都基于这个初始数组添加，最终看起来像是替换了最后一项，而非追加。

2. 第二种写法的逻辑错误 #

第二种写法里??运算符的优先级导致逻辑完全偏离需求：

shipAddress: [
...recentActivity?.customerInfo?.shipAddress ??
[{name: ''}].concat({name: place?.formatted_address}),
]

这段代码的逻辑是：如果recentActivity?.customerInfo?.shipAddress存在，就只展开它（不会添加新元素）；只有当该数组不存在时，才展开默认数组加新元素的结果。这意味着只有第一次添加会生效，后续选地址不会追加新元素。

修复方案 #

正确的状态更新方式（函数式更新） #

无论类组件还是函数组件，都要用函数式更新获取最新状态快照，确保每次更新基于当前最新状态：

onPlaceSelected = {
  place => {
    sendToState(updaterecentActivity(prevState => ({
      ...prevState,
      customerInfo: {
        ...prevState.customerInfo,
        shipAddress: [
          ...(prevState.customerInfo?.shipAddress ?? [{ name: '' }]),
          { name: place?.formatted_address }
        ]
      }
    })));
  }
}

关键细节 #

• 用prevState作为参数，它是React提供的最新状态快照，彻底避免闭包导致的旧状态问题。
• 逐层解构嵌套对象（...prevState、...prevState.customerInfo），保证只修改shipAddress数组，不破坏其他状态的不可变性。
• 展开原数组（或默认数组）后直接追加新地址对象，实现正确的数组追加逻辑。

额外检查点 #

• 确认sendToState能正确更新recentActivity状态，确保状态更新后组件能重新渲染并获取最新值。
• 验证ReactGoogleAutocomplete的onPlaceSelected回调每次触发时，place对象都能正确传递最新的地址信息。

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