React表格中食材多选框联动异常问题求助

你的问题核心是所有多选框共用了同一个布尔值状态，导致切换状态时所有框同步变化。下面是两种可行的修复方案，结合食材数组的场景实现：

方案1：用对象存储单个食材的选中状态 #

适合需要快速判断某食材是否选中的场景，以食材的唯一ID作为对象键。

示例代码 #

假设你的餐品JSON结构如下：

{
  "meals": [
    {
      "id": 1,
      "name": "番茄炒蛋",
      "ingredients": [
        {"id": 101, "name": "番茄"},
        {"id": 102, "name": "鸡蛋"},
        {"id": 103, "name": "食用盐"}
      ]
    }
  ]
}

组件实现：

import { useState } from 'react';

function IngredientTable() {
  // 假设从餐品数据中取出食材数组
  const ingredients = [{"id": 101, "name": "番茄"}, {"id": 102, "name": "鸡蛋"}, {"id": 103, "name": "食用盐"}];
  
  // 初始化选中状态：键为食材ID，值为布尔值
  const [selectedIngredients, setSelectedIngredients] = useState({});

  return (
    <table border="1">
      <thead>
        <tr>
          <th>食材名称</th>
          <th>选择</th>
        </tr>
      </thead>
      <tbody>
        {ingredients.map(ingredient => (
          // 必须添加唯一key，用食材ID
          <tr key={ingredient.id}>
            <td>{ingredient.name}</td>
            <td>
              <input
                type="checkbox"
                // 绑定当前食材的选中状态，默认false
                checked={selectedIngredients[ingredient.id] || false}
                onChange={() => {
                  setSelectedIngredients(prevState => ({
                    ...prevState,
                    // 切换当前食材的选中状态
                    [ingredient.id]: !prevState[ingredient.id]
                  }));
                }}
              />
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

export default IngredientTable;

方案2：用数组存储选中的食材ID #

适合需要批量获取选中食材ID的场景，数组中仅保留已选中的食材ID。

核心代码修改 #

// 初始化选中ID数组
const [selectedIds, setSelectedIds] = useState([]);

// 多选框的checked和onChange逻辑
<input
  type="checkbox"
  checked={selectedIds.includes(ingredient.id)}
  onChange={() => {
    setSelectedIds(prevIds => {
      if (prevIds.includes(ingredient.id)) {
        // 已选中则移除
        return prevIds.filter(id => id !== ingredient.id);
      } else {
        // 未选中则添加
        return [...prevIds, ingredient.id];
      }
    });
  }}
/>

关键注意事项 #

• 必须给每个<tr>添加唯一的key属性（优先使用食材的ID），确保React能准确区分每个列表项，避免渲染异常
• 绝对不能用单个布尔值（比如const [isChecked, setIsChecked] = useState(false)）来控制所有多选框，这是导致批量选中的直接原因

内容的提问来源于stack exchange，提问作者Abdul Haseeb Ahmad Bashir