React中用useState管理复选框及去重的问题求助

针对你遇到的两个问题，直接修改代码即可解决：

问题1：避免重复添加plant_id #

每次勾选时先过滤掉数组中已存在的同plant_id项，再添加新项，确保不会出现重复。

问题2：取消勾选时移除对应项 #

根据复选框的checked状态判断操作：勾选时执行添加逻辑，取消时从数组中移除对应plant_id的项。

另外需要给复选框加上checked属性，让界面状态和plantsFill数组同步，避免出现勾选状态不一致的情况。

修改后的完整代码如下：

const allPlants = [
  {
    "plant_id": 1,
    "title": "title 1",
  },
  {
    "plant_id": 2,
    "title": "title 2",
  },
  {
    "plant_id": 3,
    "title": "title 3",
  },
];

const handleCheckClick = (e) => {
  const plantId = Number(e.target.value);
  const isChecked = e.target.checked;
  
  if (isChecked) {
    // 过滤已存在的同id项，再添加新项
    const filteredPlants = plantsFill.filter(item => item.plant_id !== plantId);
    setPlantsFill([...filteredPlants, { plant_id: plantId }]);
  } else {
    // 取消勾选时移除对应项
    setPlantsFill(plantsFill.filter(item => item.plant_id !== plantId));
  }
};

{allPlants.map((t) => {
  // 判断当前植物是否已被选中
  const isChecked = plantsFill.some(item => item.plant_id === t.plant_id);
  return (
    <div key={t.plant_id}>
      <label htmlFor={`plant-${t.plant_id}`}>
        <input
          type="checkbox"
          id={`plant-${t.plant_id}`}
          value={t.plant_id}
          checked={isChecked}
          onChange={handleCheckClick}
        />
        {t.title}
      </label>
    </div>
  );
})}

说明：

• 把e.target.value转成数字，因为原数组中plant_id是数字类型，避免类型不匹配导致过滤失效；
• 给input添加id并对应label的htmlFor，提升交互体验，点击文字也能切换复选框状态；
• 通过plantsFill.some()判断当前植物是否已选中，确保复选框状态和数组同步。

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