如何从下拉菜单取值并动态添加到表格，同时移除已选选项

要实现从下拉菜单选择服务添加到表格动态增行，且已添加服务不再显示在下拉菜单的功能，需要对现有代码做以下调整：

1. 调整状态管理 #

原来的单个selected状态无法满足多服务存储需求，需要改用数组保存已添加的服务项，同时包含服务的名称、费率、总价等完整信息：

import { useState } from 'react';

// 初始化已添加服务数组
const [addedServices, setAddedServices] = useState([]);

2. 修改下拉菜单组件 #

• 过滤掉已添加到表格的服务，避免重复选择
• 点击选项时，将完整的服务信息添加到已选数组中

<li className="nav-item dropdown-list">
  <Link
    className="nav-link dropdown-toggle"
    data-bs-toggle="dropdown"
  >
    Select Service
  </Link>
  <ul className="dropdown-menu">
    {/* 过滤已添加的服务，只显示未选选项 */}
    {categories
      ?.filter(c => !addedServices.some(service => service.name === c.name))
      .map((c) => (
        <li 
          onClick={() => {
            // 从c对象中取对应属性，根据实际数据结构调整
            setAddedServices(prev => [...prev, {
              name: c.name,
              rate: c.rate,
              price: c.price
            }]);
          }} 
          key={c._id}
        >
          {c.name}
        </li>
      ))}
  </ul>
</li>

3. 修改表格组件实现动态行渲染 #

通过循环addedServices数组，动态生成每一行，序号为数组索引+1：

<div className="table">
  <table className="table">
    <thead>
      <tr>
        <th>Serial Number</th>
        <th>Name of Service</th>
        <th>Rate of service</th>
        <th>Total amount</th>
      </tr>
    </thead>
    <tbody>
      {/* 循环已添加服务数组生成行 */}
      {addedServices.map((service, index) => (
        <tr key={index}>
          <td>{index + 1}</td>
          <td>{service.name}</td>
          <td>{service.rate}</td>
          <td>{service.price}</td>
        </tr>
      ))}
    </tbody>
  </table>
</div>

关键说明 #

• 如果服务的费率、总价需要用户输入，可在添加服务时弹出输入框或在表格行内添加输入控件，实时更新对应服务的属性
• 建议用服务的唯一ID（比如c._id）作为行的key，而非数组索引，避免渲染性能问题

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