React中带复选框的数据删除问题：实现正确删除功能

原问题根源 #

• 用单个布尔值check记录复选框状态，导致所有复选框同步切换，无法单独选中
• 删除函数未实现正确的选中项筛选逻辑，无法批量删除目标数据

修改后的完整代码 #

import React from "react";
import { useState } from "react";

const App = () => {
  const [users, setUsers] = useState([
    {id:1, name:"Peter", surname:"Robinson"},
    {id:2, name:"Ann", surname:"Walker"},
    {id:3, name:"James", surname:"Allen"},
  ]);

  // 用数组存储选中的用户ID，代替单个布尔值
  const [selectedIds, setSelectedIds] = useState([]);

  // 切换单个复选框的选中状态
  const handleToggle = (userId) => {
    setSelectedIds(prev => {
      if (prev.includes(userId)) {
        // 如果已选中，移除该ID
        return prev.filter(id => id !== userId);
      } else {
        // 如果未选中，添加该ID
        return [...prev, userId];
      }
    });
  };

  // 删除选中的数据
  const removeSelected = () => {
    setUsers(prevUsers => prevUsers.filter(user => !selectedIds.includes(user.id)));
    // 删除后清空选中状态
    setSelectedIds([]);
  };
  
  return (
    <>
      <table className="table table-bordered">
        <thead>
          <tr>
            {users.length > 0 && Object.keys(users[0]).map((elm,i) => (
              <td key={i}>
                {elm.charAt(0).toUpperCase() + elm.slice(1)}
              </td>
            ))}
            <td>Select</td>
          </tr>
        </thead>
        <tbody>
          {users.map((user) => (
            <tr key={user.id}>
              <td>{user.id}</td>
              <td>{user.name}</td>
              <td>{user.surname}</td>
              <td>
                <input 
                  type="checkbox" 
                  checked={selectedIds.includes(user.id)}
                  onChange={() => handleToggle(user.id)} 
                />
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      <button className="btn btn-primary ms-2" onClick={removeSelected}>Delete selected</button>
    </>
  );
};

export default App;

关键修改说明 #

• 状态存储方式变更：用selectedIds数组记录所有选中的用户ID，每个复选框独立维护自己的选中状态
• 复选框状态绑定：通过checked属性将复选框状态与selectedIds数组关联，确保UI和状态同步
• 切换逻辑优化：handleToggle函数根据当前ID是否在选中数组中，动态添加或移除ID，实现单个复选框的独立控制
• 删除逻辑实现：removeSelected函数通过filter方法过滤掉包含在selectedIds中的用户数据，实现批量删除，删除后清空选中状态
• key值优化：用用户的唯一id作为列表项的key，避免因数组索引变化导致的渲染问题
• 空数组兼容：表头循环前判断users.length > 0，避免用户数据为空时出现报错

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