如何将Autocomplete选中值添加到数组且不覆盖原有元素？

• 你定义的var arr=[]是组件内部的普通局部变量，React 组件每次渲染都会重新执行组件函数内的所有顶层代码，所以每次选中触发状态更新后组件重渲染，arr都会被重新赋值为空数组，之前添加的内容直接丢失。
• 即使将arr改为状态变量，直接调用push修改原数组属于可变操作，不会触发React的状态更新检测，状态也不会正确更新。

首先确认你已经通过React的useState声明了存储选中值的状态：

import { useState } from 'react';

// 组件内部声明状态，初始值为空数组
const [item, setItem] = useState([]);

然后修改changeHandler处理函数，用不可变的方式更新数组：

const changeHandler = (value) => {
  // 基于之前的状态生成全新数组，追加新选中的值
  setItem(prevState => [...prevState, value]);
};

你的Autocomplete组件无需修改其他属性，绑定的onChange可以直接复用修改后的changeHandler。

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