反应状态从另一个状态变量更新所有先前的元素（反应选择）

Question

我有这个应用程序。我想为每个唯一值添加数组参数。但是每次“数据”状态都会改变。但是我没有将更改应用于数据，而是应用于参数。因此，每次选择与以前的元素更新之前相同的值。

function App() {   
  const [selected, setSelected] = useState(null)
  const [params, setParams] = useState([])
 
  const [data, setData] = useState([{"value":"AAA","label":"AAA"}, {"value":"BB","label":"BBB"} ])

  const handleChange = (selected) => {     
    setSelected(selected)
    const a = selected
    a.label = a.label + params.length
    setParams(state=> [...state, a ])   
  }

  return (
    <div className="container">      
        <label>Add Data: </label> 

         {params.map((param) => {
          if(param && param.value){
            return<div>{param.label}</div>          
          }})}

        <Select className = "select4"
            value={selected}
            onChange={handleChange}
            options={data}
          /> 
        <br />
        
    </div>
  );
}

这是怎么回事，我不想更改它们，我想要唯一的AAA1，AAA2，AAA3

在将if (!params.includes(selected)) {添加到setParams之后进行更新。

第二张图片

我要添加“ AAA0”，“ AAA1”，“ AAA2”等。

Answer 1

似乎您要覆盖“数据”数组中的值，然后将其添加为“参数”状态。尝试创建一个新对象，在handleChange函数中修改此行：

从这里 const a =选定

对此 const a = {... selected}