React Google Autocomplete组件选择地点后状态重置问题求助

我在用Google Autocomplete组件，触发onPlaceSelected事件时，想把选中的地点存到父组件的状态数组inputs里。但每次选新地点，之前的数组值都会被清成空数组，再添加新地点，没法追加到现有数组里。我猜可能和refs有关（这个组件好像用到了refs），但我对refs不熟，不知道怎么修，求帮助。

简化示例 #

// 初始状态：inputs = [place1];
onPlaceSelected={(place2) => {
  console.log(inputs); // 打印空数组
  addInput(place2);
}}
// 执行后得到：input = [place2]; 预期应该是 input = [place1, place2]

// addInput 大致实现
function addInput(place) {
  setInputs([...inputs, place]);
}

实际代码 #

// Autocomplete组件
<Autocomplete
  id="address"
  name="address"
  className="side-panel__form__input"
  placeholder="Enter an address"
  onPlaceSelected={(place, inputRef, autocomplete) => {
    console.log("inputs", inputs); // 从父组件状态传入的props，本该有元素但这里是空的
    console.log("place", place);
    console.log("inputRef", inputRef);
    console.log("autocomplete", autocomplete);
    handleAddPlace(place);
  }}
  options={{
    types: ["address"],
    componentRestrictions: { country: "us" },
  }}
/>

问题出在状态更新的闭包捕获，和refs无关。

你的addInput函数里，setInputs([...inputs, place])依赖的是当前函数作用域里的inputs值。如果onPlaceSelected的回调被组件缓存了（比如Autocomplete内部用固定引用保存了初始回调），这个回调会一直捕获组件首次渲染时的inputs（也就是空数组），每次执行都会基于空数组添加新元素，导致旧内容丢失。

修复方法是用函数式更新获取最新状态值：

function addInput(place) {
  // 用函数接收最新的prevInputs，再返回新数组
  setInputs(prevInputs => [...prevInputs, place]);
}

或者直接在onPlaceSelected回调里写：

onPlaceSelected={(place) => {
  setInputs(prev => [...prev, place]);
}}

这样每次更新状态时，都会基于最新的数组追加元素，不会再出现覆盖旧值的情况。

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