在.map中保留onchange单选按钮的值

Question

我正在使用 .map 来显示人员列表：

const [ftraveller, setFTraveller] = useState(null)

{tr?.map((item, i) => {
return (  
<>
<FormControlLabel key={el.id + item.Name}  control={<Radio onChange={(e) => setFTraveller(e.target.value)} />} value={item.Name} name={el.id + item.Name} label={item.Name}></FormControlLabel>
</>
)})}
</RadioGroup>

然后使用 ftraveller 显示该人可用的选项列表：

{getselecteddata.map(els => {
return (
<>
<RadioGroup key={els.id} value={els.packingLocation ? els.packingLocation : "To Pack"} defaultValue="To Pack" row
onChange={e => {
const val = e.target.value
const getd = getselecteddata.map(els => {
return {
...els,
packingLocation: val,
}
})
const ar = [...getalldata, ...getd]
setFoodValue(ar)
}}>

<FormControlLabel value={"A - " + ftraveller} control={
<Radio
value={"A - " + ftraveller}
name={el.id + "A - " + ftraveller}
/>
}
label={"A"}
/>

<FormControlLabel value={"B - " + ftraveller} control={
<Radio
value={"B - " + ftraveller}
name={el.id + "B - " + ftraveller}
/>
}
label={"B"}
/>
</RadioGroup>
</>
)})}

我遇到的问题是，如果我改变了人，那么选中的选项就会改变其他人。所以看起来每次我更改收音机时FTraveller都会设置为最新的选择。

如何更改此设置以唯一存储每个项目的 setFTraveller？

Answer 1

有多种方法可以做到这一点，最简单的就是使用

ftravellers

作为数组：

// create new array and fill it with false
// new Array(tr?.lenght).fill(false)

const [ftravellers, setFTravellers] = useState(new Array(tr?.lenght).fill(false));

然后在你的收音机中：

<Radio onChange={(e) => setFTravellers(fts => {
   let arr = [...fts];
   arr[i] = e.target.value;
   return arr;
})} value={ftravellers[i]} />

如你所见，还可以，但有点笨拙

其他方法（如果我想将所有数组保留在父组件中，我通常会这样做：

// define array as empty array, and push/remove item id
const [ftravellers, setFTravellers] = useState([])

const handleRadio = (ftravellerId) => {
  if (ftravellers.include(id))
     setFTravellers(ftravellers.filter(({id}) => id !== ftravellerId);
  else 
     setFTravellers([...ftravellers, id]);
}

// then in the radio:
<Radio onChange={(e) => handleRadio(id)} value={travelers?.include(id)} ... />

你可以看到更简洁的方法

第三个选项是从您的无线电创建一个组件，并将状态保留在那里，但我认为如果您想在其他地方使用此状态，它不适合。