React单行列多分类单选按钮选中时state更新异常问题求助

问题成因 #

• 状态更新语法错误
  setAry(...ary,'1')不符合useState数组更新规范：setState仅接收一个参数作为新状态值，直接展开数组会传入多个独立参数，React只会取第一个参数作为最终状态。当初始ary为[]时，该写法等价于setAry('1')，数组状态会被错误覆盖为字符串类型，后续操作自然异常。
• 闭包捕获陈旧值
  如果单选框绑定的onChange处理函数没有将ary加入依赖项动态更新，函数会捕获首次渲染时的初始空数组，无论后续状态如何更新，旧处理函数内获取的永远是初始化的空值，就会出现第二个分类触发时打印空数组的问题。

修复方案 #

改用状态函数式更新写法即可同时解决两个问题，函数式更新可以直接拿到最新的状态值，不受闭包影响，同时正确构造新数组：

// 原错误写法
// setAry(...ary,'1')
// 修复后写法
setAry(prevAry => [...prevAry, '1'])

适配业务场景的优化建议 #

当前业务是分类下单选互斥的场景，用数组存储所有选中id后续处理同分类换选的删除逻辑会比较繁琐，建议改用对象存储分类与选中id的映射，更新逻辑更简洁：

const [selectedMap, setSelectedMap] = useState({})

// 单选触发时传入对应分类id和选项id
const handleSelect = (categoryId, optionId) => {
  setSelectedMap(prev => ({
    ...prev,
    [categoryId]: optionId
  }))
}

内容的提问来源于stack exchange，提问作者Har-Har Mahadev