React中defaultChecked复选框首次点击时onChange事件不触发问题

问题根源 #

1. 混用受控与非受控组件逻辑：你用defaultChecked设置初始选中状态（非受控组件写法），但同时又通过setSelectedGrpList维护状态，这种混用会导致DOM状态和React状态不同步，首次点击时DOM自身状态变化但React的事件逻辑未正常触发。
2. 直接修改原State数组：handleGrpItemClick里直接赋值原状态数组并修改（splice/push），React依赖引用变化检测状态更新，修改原数组不会触发组件重渲染，后续状态同步也会出问题。

解决方案 #

1. 改用受控组件写法（替换defaultChecked为checked） #

把两个条件渲染的input合并，用checked绑定状态，让React完全控制复选框的选中状态：

<input
  type='checkbox'
  onChange={(e) => {
    handleGrpItemClick(item.id)
  }}
  checked={selectedGrpList.includes(item.id.toString())}
/>

2. 修改状态更新逻辑，创建新数组 #

不要直接修改原状态数组，通过创建新数组的方式更新状态，同时使用函数式更新确保拿到最新状态：

function handleGrpItemClick(id) {
  const idStr = id.toString();
  setSelectedGrpList(prevList => {
    if (prevList.includes(idStr)) {
      // 过滤当前id，返回新数组
      return prevList.filter(itemId => itemId !== idStr);
    } else {
      // 拼接新元素，返回新数组
      return [...prevList, idStr];
    }
  });
}

改动说明 #

• 受控组件的checked属性完全由React状态驱动，点击时onChange会稳定触发，状态更新后组件自动重渲染，同步复选框状态。
• 函数式更新（setSelectedGrpList(prevList => ...)）避免了闭包导致的状态过期问题，而filter、扩展运算符创建新数组，保证状态引用变化，让React正确识别状态更新。

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