React useState hook未按预期运行，复选框选中状态无法即时在UI渲染

问题根因 #

你当前的代码直接对selected状态数组做了splice、push原地修改操作，React的状态更新依赖引用变化判断是否需要触发重渲染，修改原数组没有改变引用地址，因此setSelected无法触发UI即时更新，只有组件重新挂载时才会读取最新状态值渲染。
另外代码还存在变量名笔误：你定义了selectedIndex存储匹配下标，但splice方法里用了不存在的checkedIndex，运行时会报错。

修复方案 #

修改状态时始终返回新的数组，不直接修改原状态：

const [selected, setSelected] = useState([]);

const handleState = (id: string) => {
  const selectedIndex = selected.findIndex((i) => i.id === id);

  if (selectedIndex > -1) {
    // filter方法返回新数组，移除对应id的选项
    setSelected(selected.filter(item => item.id !== id));
  } else {
    const targetItem = data.find((i) => i.id === id);
    // 展开运算符拼接生成新数组，新增选中项
    setSelected([...selected, targetItem]);
  }
};

你的渲染逻辑没有问题，修改后状态引用发生变化，UI会自动即时更新选中的复选框标签。

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