React 18函数组件中useState数组重置问题求助

我需要实现：勾选复选框时将其name属性值加入selectedItems数组，取消勾选时从数组中移除该值。但实际操作中，勾选任意复选框后，selectedItems数组仅包含当前勾选项的name值；取消勾选时，数组会被设置为空数组。

相关代码如下：

const [selectedItems, setSelectedItems] = useState([]);

useEffect(()=> {
    // Log selectedItems out every time it changes.
    console.log(selectedItems) // Always only the last selected checkbox name, no others.
}, [selectedItems])

const onCheckChange = e=> {
    console.log(e.target.name, e.target.checked) // Are as expected, the name and value.
    if (e.target.checked) {
        setSelectedItems(prev=> [...prev, e.target.name])
        // setSelectedItems([...selectedItems, e.target.name]) // Same result.
    } else {
        setSelectedItems( prev=> prev.filter(s=> s!==e.target.name) )
        // setSelectedItems(selectedItems.filter(s=> s!==e.target.name)) // Same result.
    }
}

问题排查与解决方案 #

你的onCheckChange函数逻辑本身是正确的（尤其是用了函数式更新prev => ...，已经避免了闭包捕获旧state的问题），问题大概率出在复选框的渲染代码上，以下是常见的修复点：

• 给每个复选框设置唯一的key属性
  React需要通过key来追踪组件的状态，如果你是循环渲染复选框，一定要给每个复选框设置唯一且稳定的key（不要用数组索引，除非数据源不会变动），比如基于复选框的name值设置。

• 正确绑定复选框的checked状态
  必须将复选框的checked属性与selectedItems数组关联，否则React无法正确同步复选框的状态，会导致每次勾选后其他复选框的状态被重置，进而影响state数组的更新。示例代码如下：

  // 假设你有一组复选框数据源
  const checkboxList = [
    { name: 'item1', label: '选项1' },
    { name: 'item2', label: '选项2' },
    { name: 'item3', label: '选项3' }
  ];
  
  // 渲染复选框时绑定状态
  return (
    <div>
      {checkboxList.map(item => (
        <label key={item.name}>
          <input
            type="checkbox"
            name={item.name}
            checked={selectedItems.includes(item.name)}
            onChange={onCheckChange}
          />
          {item.label}
        </label>
      ))}
    </div>
  );
  

• 确认组件没有被意外重新挂载
  如果你的组件被包裹在条件渲染中，或者父组件的key属性频繁变化，会导致组件被卸载后重新挂载，selectedItems会回到初始的空数组。检查父组件的渲染逻辑，避免不必要的组件卸载。

额外优化 #

可以给onCheckChange函数加个去重判断，避免重复添加同一个name（增强代码健壮性）：

const onCheckChange = e => {
  const { name, checked } = e.target;
  setSelectedItems(prev => {
    if (checked) {
      return prev.includes(name) ? prev : [...prev, name];
    } else {
      return prev.filter(s => s !== name);
    }
  });
};

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