React数组Map渲染复选框全选异常：首项未选中求助

点击全选复选框后，tradein数组的所有id已存入selected2数组，但渲染时第一个索引的复选框未被选中。相关代码如下：

全选函数 #

const handleSelectAll = e => {
        setIsCheckAll(!isCheckAll);
        setSelected2(tradein?.data.map((li) => li.id));
        if (isCheckAll) {
          setSelected2([]); 
        }
      };

单个复选框变更函数 #

const handleChange2 = event => {
        var updatedList = [...selected2];
               
        if (event.target.checked) {
            updatedList = [...selected2, event.target.value];
        } else {
            updatedList.splice(selected2.indexOf(event.target.value), 1);
        }
        setSelected2(updatedList)
    }

渲染代码片段 #

<TableCell style={{fontWeight:"bold"}}><input type='checkbox'  onChange={handleSelectAll} checked={isCheckAll}/></TableCell>
{tradein?.data.map((ad, id)=>{
                            return (
                                <>
                                 <TableBody key={id}>
                                    <TableRow >
                                        <TableCell >
                                            <input type='checkbox'
                                            onChange={handleChange2} 
                                            key={id} 
                                            value={ad.id} 
                                            checked={selected2[ad.id]}/>
                                        </TableCell>
                                 </TableBody>

问题根源 #

1. 复选框选中状态判断错误：你用selected2[ad.id]来判断是否选中，但selected2是存储id的数组，不是键值对对象。如果ad.id为0或者超出数组长度，会返回undefined，导致复选框无法显示选中状态。
2. 全选函数逻辑错误：setIsCheckAll是异步操作，直接用当前isCheckAll值判断清空数组，会因状态未即时更新导致逻辑偏差。

修复代码 #

1. 修正复选框选中判断逻辑

将checked={selected2[ad.id]}改为checked={selected2.includes(ad.id)}，利用数组includes方法精准判断当前id是否在选中列表中：

<input type='checkbox'
       onChange={handleChange2} 
       key={id} 
       value={ad.id} 
       checked={selected2.includes(ad.id)}/>

2. 修复全选函数逻辑

直接使用事件对象的checked属性判断全选/取消全选，规避异步状态更新的问题：

const handleSelectAll = e => {
  const isChecked = e.target.checked;
  setIsCheckAll(isChecked);
  setSelected2(isChecked ? tradein?.data.map(li => li.id) : []);
};

3. 优化单个复选框变更函数（可选）

统一value的类型（字符串转数字），避免因类型不一致导致indexOf查找失败，同时同步更新全选状态：

const handleChange2 = event => {
  const value = Number(event.target.value);
  let updatedList = [...selected2];
  
  if (event.target.checked) {
    if (!updatedList.includes(value)) {
      updatedList.push(value);
    }
  } else {
    const index = updatedList.indexOf(value);
    if (index !== -1) {
      updatedList.splice(index, 1);
    }
  }
  
  setSelected2(updatedList);
  setIsCheckAll(updatedList.length === tradein?.data.length);
};

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