如何在TypeScript React中逐个将复选框组项添加至数组

你当前的代码存在几个核心问题，导致勾选复选框时会覆盖之前的数组值：

1. 错误使用Array.push()：push()方法返回的是数组的新长度，而非更新后的数组。你用setItems(items.push(...items, new_items))实际上是把数字（数组长度）存入了items状态，后续操作自然会出错。
2. 未处理状态更新的异步性：直接依赖当前items状态更新可能拿到旧值，应该用函数式更新确保获取最新状态。
3. 取消勾选时未移除对应项：代码只切换了checked状态，没有处理数组的移除逻辑。

修复后的代码 #

const [items, setItems] = useState<any>([])
// 直接从数组判断当前项是否选中，避免单独维护checked状态导致的不一致
const checked = items.some(item => item.id === props.id)

const handleSelectable = () => {
  if (!checked) {
    // 函数式更新+扩展运算符，生成新数组添加元素
    setItems(prevItems => [...prevItems, { id: props.id, name: props.title }])
  } else {
    // 取消勾选时过滤掉当前项
    setItems(prevItems => prevItems.filter(item => item.id !== props.id))
  }
}

关键说明 #

• 不可变状态更新：用[...prevItems, newItem]生成新数组，符合React状态不可变的要求，避免直接修改原数组导致的状态异常。
• 函数式更新：setItems(prevItems => ...)确保每次更新都基于最新的状态值，解决异步更新带来的旧值问题。
• 状态联动：通过items.some(...)直接从数组判断当前项是否选中，不需要单独维护checked状态，避免状态不一致。

如果确实需要单独维护checked状态（比如有其他逻辑依赖），可以这样写：

const [items, setItems] = useState<any>([])
const [checked, setChecked] = useState(false)

const handleSelectable = () => {
  setChecked(prevChecked => {
    if (!prevChecked) {
      setItems(prevItems => [...prevItems, { id: props.id, name: props.title }])
      return true
    } else {
      setItems(prevItems => prevItems.filter(item => item.id !== props.id))
      return false
    }
  })
}

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