React项目使用Chakra UI时Checkbox复选框无法选中如何解决

问题根因 #

• 事件取值逻辑不可靠：Chakra UI的Checkbox是封装后的复合组件，点击时触发事件的target可能是自定义图标、外层容器等非原生input元素，此时e.target.value为undefined，执行parseInt(undefined)会得到NaN，永远无法匹配有效用户ID，导致存储选中ID的ids数组无法正确更新。
• ID类型不匹配：即使事件target为原生input，input的value属性永远返回字符串类型，若接口返回的user.id为数字/UUID字符串等类型，强制转数字后会出现类型不匹配，isChecked判断时ids.includes(user.id)永远返回false，视图层无法同步选中状态。
• 存在冗余无效状态：代码中定义了[user, setUser]状态同步用户列表数据，但实际渲染时直接使用接口返回的data.users，该状态完全未被使用，不会影响功能但会造成不必要的重渲染。

修复步骤 #

1. 移除从事件对象解析当前项ID的逻辑，列表渲染时直接将当前循环项的user.id传入选中处理函数，从根源上避免事件target取值错误
2. 统一ID类型，不要强制做类型转换，直接使用接口返回的原始ID值存储和判断
3. 事件对象仅用于获取当前复选框的checked状态，更新选中ID数组
4. （可选）删除未使用的冗余user状态和对应的useEffect逻辑

修复后核心代码 #

选中处理函数 #

// 直接接收当前项ID和选中状态，不需要从事件对象解析ID
function selectUser(selectedId: string | number, isChecked: boolean) {
  setIds(prevIds => {
    if (isChecked) {
      // 去重后加入选中数组
      return prevIds.includes(selectedId) ? prevIds : [...prevIds, selectedId]
    }
    // 取消选中则过滤掉当前ID
    return prevIds.filter(id => id !== selectedId)
  })
}

Checkbox组件绑定 #

{data.users.map((user) => (
  <Tr key={user.id}>
    <Td px={['4', '4', '6']}>
      <Checkbox
        colorScheme="orange"
        // 直接传入当前项ID和选中状态，不依赖事件对象取ID
        onChange={(e) => selectUser(user.id, e.target.checked)}
        isChecked={ids.includes(user.id)}
      />
    </Td>
    {/* 其余单元格逻辑保持不变 */}
  </Tr>
))}

可删除的冗余代码 #

直接删除以下无用代码即可：

// 删除该状态定义
const [user, setUser] = useState([]);

// 删除对应的useEffect
useEffect(() => {
  if (data) {
    console.log(data)
    setUser(data.users);
  }
}, [data]);

验证方式 #

• 点击复选框时打印ids数组，确认数组内存储的ID值、类型和列表项user.id完全一致
• 检查点击后复选框的选中状态是否和ids数组内容同步
• 若需要实现表头全选功能，给表头的Checkbox补充全选/反选逻辑即可，判断逻辑保持类型一致就不会出现状态异常

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