React使用useState存储复选框选中值仅返回最新勾选值如何解决

架构老林

2026-9-30

问题原因

原代码存在两个核心错误：

每次勾选时直接用[e.target.value]覆盖原有数组，没有保留之前已经选中的选项值
取消勾选时直接将keyword赋值为空字符串，和初始的数组类型不匹配，也会清空所有已选值

修复后代码

import { useState } from 'react';

function FilterButton() {
  const [keyword, setKeyword] = useState([]);

  const onChange = (e) => {
    const currentValue = e.target.value;
    if (e.target.checked) {
      // 勾选时基于原有数组新增当前值，函数式更新可避免闭包导致的状态获取错误
      setKeyword(prev => [...prev, currentValue]);
    } else {
      // 取消勾选时仅过滤掉当前取消的选项，保留其余已选值
      setKeyword(prev => prev.filter(item => item !== currentValue));
    }
  };

  // 若你确实需要['1,2,3']这种单元素逗号拼接数组格式，可使用下方处理逻辑
  // const formattedKeyword = [keyword.join(',')]
  // console.log(formattedKeyword)

  console.log(keyword); // 依次勾选1、2、3时输出为 ['1'] → ['1','2'] → ['1','2','3']

  return (
    <>
      <input type="checkbox" value='1' onChange={onChange} />
      <input type="checkbox" value='2' onChange={onChange} />
      <input type="checkbox" value='3' onChange={onChange} />
      <input type="checkbox" value='4' onChange={onChange} />
      <input type="checkbox" value='5' onChange={onChange} />
      <input type="checkbox" value='6' onChange={onChange} />
    </>
  );
}