React中如何基于对象列表动态添加带数据的MUI Chips组件

问题根源 #

你当前的实现有两个核心问题：

• 所有Chip的label都绑定了同一个全局变量subCategory，导致渲染时全部显示同一个值
• 添加新Chip时，往chipList中存入的是空字符串，没有把选中的分类名称真正保存到状态里

修正后的完整代码示例 #

import { useState } from 'react';
import { Chip, Select, MenuItem } from '@mui/material';

// 假设你的CategoryChip是封装后的组件，这里用原生Chip示例也可以
const CategoryChip = ({ label, onDelete }) => (
  <Chip label={label} onDelete={onDelete} style={{ margin: '4px' }} />
);

const YourComponent = () => {
  // 存储所有已添加的Chip数据
  const [chipList, setChipList] = useState([]);
  // 存储当前下拉菜单选中的分类
  const [selectedSubCategory, setSelectedSubCategory] = useState("");

  // 添加新Chip的逻辑
  const addNewCategory = () => {
    // 限制最多5个，且避免添加空值
    if (chipList.length < 5 && selectedSubCategory.trim()) {
      setChipList([...chipList, { chip: selectedSubCategory }]);
      // 添加后清空下拉选中状态，提升体验
      setSelectedSubCategory("");
    }
  };

  // 删除指定索引的Chip
  const handleDelete = (index) => {
    setChipList(chipList.filter((_, i) => i !== index));
  };

  return (
    <div>
      {/* 下拉菜单：选择要添加的分类 */}
      <Select
        value={selectedSubCategory}
        onChange={(e) => setSelectedSubCategory(e.target.value)}
        style={{ marginRight: '8px', minWidth: 150 }}
        placeholder="选择分类"
      >
        <MenuItem value="分类1">分类1</MenuItem>
        <MenuItem value="分类2">分类2</MenuItem>
        <MenuItem value="分类3">分类3</MenuItem>
      </Select>
      {/* 添加按钮 */}
      <button onClick={addNewCategory} disabled={!selectedSubCategory.trim() || chipList.length >=5}>
        添加分类
      </button>

      {/* 渲染Chip列表 */}
      <div style={{ marginTop: '16px' }}>
        {chipList.map((widget, index) => (
          <CategoryChip 
            key={index} 
            label={widget.chip} // 这里取当前item的chip值，而非全局变量
            onDelete={() => handleDelete(index)} 
          />
        ))}
      </div>
    </div>
  );
};

export default YourComponent;

关键改动说明 #

1. 新增selectedSubCategory状态：专门存储当前下拉菜单选中的分类，避免和已添加的Chip数据混淆
2. 修改addNewCategory逻辑：添加时将selectedSubCategory的值存入chipList，同时限制空值添加
3. 渲染Chip时绑定对应数据：每个Chip的label从chipList的对应项中取值，确保每个Chip显示独立的名称
4. 补充删除逻辑：通过过滤数组删除指定索引的Chip

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