React中如何实现数组仅一个对象的isActive属性为true其余为false

修改方案 #

1. 修正事件处理函数

你现有代码只修改了当前选中项的属性，没有处理其余项的重置逻辑，另外还存在参数变量名写错的问题（入参是id，但查找时用了未定义的photoId），修改后的代码如下：

const handleDefaultPhotoOnTable = (id, e) => {
  const isChecked = e.target.checked;
  // 遍历所有条目，仅匹配id的项使用当前复选框状态，其余全部强制设为false
  const updatedPhotos = photos.map(photo => ({
    ...photo,
    isActive: photo.id === id ? isChecked : false
  }));
  setPhotos(updatedPhotos);
};

2. 修正渲染代码的已知问题

你现有循环渲染时给input写死了id='defaultId'，会导致页面出现重复id，建议修改为动态生成的唯一值：

<tbody>
  {
    photos.map((photo) => (
      <tr key={photo.id}>
        <td>{photo.name}</td>
        <td className="text-center">
          <input 
            onChange={(e) => { handleDefaultPhotoOnTable(photo.id, e); }} 
            name='isActive' 
            checked={photo.isActive} 
            type='checkbox' 
            id={`photo-${photo.id}`} 
          />
        </td>
      </tr>
    ))
  }
</tbody>

额外注意事项

你定义的初始photos数组里有两个id为3的对象，会导致查找匹配、渲染key重复的问题，建议先把id修正为唯一值。

内容的提问来源于stack exchange，提问作者Sakhawat Hossain Sohel