React中如何更新表格复选框布尔状态并提交选中项？

你的核心问题是用了**单个布尔值checked**管理所有复选框，导致所有服务的status都会变成同一个值，无法区分单个服务的选中状态。下面是修正后的实现：

核心修改点 #

• 把单个checked状态改成对象，用服务的唯一标识（比如item.value）作为键，记录每个服务的选中状态
• 复选框的checked属性绑定对应服务的状态，onChange时只更新当前服务的状态
• 提交时根据状态对象，给每个服务设置对应的status

修正后的完整代码 #

function AllReferral() {
  // 初始化状态为对象，存储每个服务的选中状态，默认都不选中
  const [checkedServices, setCheckedServices] = useState({});
  // 假设notes是已定义的状态，这里补充初始化
  const [notes, setNotes] = useState("");

  //submitHandler///
  const handleClick = (user) => {
    let mainServices = user?.services.map((element) => {
      return {
        serviceName: element?.label,
        serviceCode: element?.value,
        price: element?.price,
        // 根据状态对象获取当前服务的选中状态，默认false
        status: checkedServices[element.value] || false,
      };
    });

    const params = JSON.stringify({
      services: mainServices,
      note: notes,
    });

    Axios("https://jsonplaceholder.typicode.com/posts", {
      method: "POST",
      data: params,
      headers: {
        "Content-Type": "application/json",
      },
    })
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  // 处理单个复选框的状态切换
  const handleCheckboxChange = (serviceValue, isChecked) => {
    setCheckedServices(prev => ({
      ...prev,
      [serviceValue]: isChecked
    }));
  };

  return (
    <section>
      <div>
        Secondary Services(Referral):
        {user?.services?.length > 0 && (
          <div>
            <table>
              <thead>
                <tr>
                  <th scope="col"></th>
                  <th scope="col">Service Name</th>
                  <th scope="col">Service Code</th>
                  <th scope="col">Service Price</th>
                </tr>
              </thead>
              {/* 修复tbody位置：所有tr应该放在同一个tbody里，不要循环生成 */}
              <tbody>
                {user?.services?.map((item, index) => (
                  <tr key={index}>
                    <td>
                      <input
                        name="serviceName"
                        type="checkbox"
                        // 绑定当前服务的选中状态
                        checked={checkedServices[item.value] || false}
                        // 切换时更新对应服务的状态
                        onChange={(e) => handleCheckboxChange(item.value, e.target.checked)}
                      />
                    </td>

                    <td>{item?.label}</td>

                    <td>{item?.value}</td>

                    <td>
                      <span>
                        &#8358;
                        {item?.price}
                      </span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
            {/* 补充提交按钮，原代码缺失触发提交的入口 */}
            <button onClick={() => handleClick(user)}>提交选中服务</button>
          </div>
        )}
      </div>
    </section>
  );
}

额外说明 #

1. 修复了HTML结构问题：原代码在map里循环生成tbody，不符合规范，所有表格行应该放在同一个tbody内
2. 补充了notes状态的初始化（原代码未定义，假设业务需要该字段）
3. 新增了提交按钮，提供触发提交逻辑的交互入口

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