如何在React的.map遍历中为每个项单独存储单选选中值？

你的问题出在两个核心点：一是用了全局共享的ftraveller状态，导致所有项的位置选项都依赖同一个值；二是更新位置时错误修改了所有项的packingLocation，而非当前操作的项。以下是具体修改方案：

1. 替换全局状态为项级独立状态 #

把单个的ftraveller改成对象结构，专门存储每个项对应的选中人员：

// 键是getselecteddata中每个项的id，值是选中的人员名称
const [selectedTravellers, setSelectedTravellers] = useState({})

2. 让每个项拥有独立的人员选择器 #

把人员选择的单选组放到getselecteddata的循环体内，确保每个项都有自己的人员选择控件：

{getselecteddata.map(els => {
  return (
    <div key={els.id}>
      {/* 每个项专属的人员选择单选组 */}
      <RadioGroup
        value={selectedTravellers[els.id] || ''}
        onChange={(e) => {
          // 仅更新当前项对应的选中人员
          setSelectedTravellers(prev => ({
            ...prev,
            [els.id]: e.target.value
          }))
        }}
      >
        {tr?.map((item) => (
          <FormControlLabel
            key={`${els.id}-${item.Name}`}
            control={<Radio />}
            value={item.Name}
            name={`${els.id}-traveller`}
            label={item.Name}
          />
        ))}
      </RadioGroup>

3. 修正位置选择的逻辑 #

• 位置选项的value绑定当前项选中的人员，不再依赖全局值
• 更新位置时仅修改当前操作项的packingLocation，而非所有项：

{/* 位置选择单选组 */}
      <RadioGroup
        value={els.packingLocation || "To Pack"}
        defaultValue="To Pack"
        row
        onChange={e => {
          const val = e.target.value
          // 只更新当前操作的项
          const updatedData = getselecteddata.map(item => {
            if (item.id === els.id) {
              return {...item, packingLocation: val}
            }
            return item
          })
          const ar = [...getalldata, ...updatedData]
          setFoodValue(ar)
        }}
      >
        {/* 选中人员后才显示位置选项 */}
        {selectedTravellers[els.id] && (
          <>
            <FormControlLabel
              value={`A - ${selectedTravellers[els.id]}`}
              control={<Radio name={`${els.id}-location`} />}
              label="A"
            />
            <FormControlLabel
              value={`B - ${selectedTravellers[els.id]}`}
              control={<Radio name={`${els.id}-location`} />}
              label="B"
            />
          </>
        )}
      </RadioGroup>
    </div>
  )
})}

修改完成后，每个项的人员选择和位置配置都会独立运行，切换某一项的人员不会影响其他项的选中状态，更新位置也只会修改当前项的数据。

内容的提问来源于stack exchange，提问作者Paul VI