点击菜单项时正确显示单个Material UI Chip的技术求助

核心问题分析 #

1. 选中类别赋值错误：handleCategoryClick里直接把整个categories数组赋值给selectedCategory，导致Chip显示数组拼接后的字符串。
2. 菜单项点击事件绑定错误：MenuItem的onClick绑定的是打开菜单的handleClick，没有触发类别选择逻辑，也没传递当前点击的类别。
3. 冗余状态：showChip状态可以通过selectedCategory是否为null来替代，无需额外维护。

修改后的完整代码 #

const categories = [
  'Category 1',
  'Category 2',
  'Category 3',
];

export default function Test() {
  const [selectedCategory, setSelectedCategory] = React.useState(null);
  const [anchorEl, setAnchorEl] = React.useState(null);
  const open = Boolean(anchorEl);

  // 打开菜单
  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  // 关闭菜单
  const handleClose = () => {
    setAnchorEl(null);
  };

  // 处理类别选择
  const handleCategoryClick = (category) => {
    setSelectedCategory(category); // 赋值单个类别，而非整个数组
    setAnchorEl(null); // 选择后关闭菜单
  };

  return (
    <>
      <Button
        id="basic-button"
        aria-controls={open ? 'basic-menu' : undefined}
        aria-haspopup="true"
        aria-expanded={open ? 'true' : undefined}
        onClick={handleClick}
      >
        Categories
      </Button>
      <Menu
        id="basic-menu"
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
        MenuListProps={{
          'aria-labelledby': 'basic-button',
        }}
      >
        {categories.map((category) => (
          <MenuItem
            key={category}
            onClick={() => handleCategoryClick(category)} // 绑定正确的点击事件并传递当前类别
          >
            {category}
          </MenuItem>
        ))}
      </Menu>
      {/* 根据选中状态显示单个Chip */}
      {selectedCategory && <Chip key={selectedCategory} label={selectedCategory} />}
    </>
  );
}

关键修改点 #

• 修正类别赋值逻辑：handleCategoryClick接收category参数，将单个类别值存入selectedCategory状态。
• 绑定正确的点击事件：MenuItem的onClick改为调用handleCategoryClick，并传入当前遍历的category。
• 清理冗余代码：移除了未使用的expanded和showChip状态，简化逻辑。
• 整理代码缩进：统一缩进格式，让代码结构更清晰。

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