React Hooks + Material-UI Modal实现卡片列表点击弹出对应详情弹窗的显示异常解决

• 结构错误：将Modal组件直接嵌套在beers.map的循环内部，相当于为每一张卡片都创建了独立的Modal实例。所有弹窗都绑定同一个全局open状态，当触发打开操作时，所有循环生成的弹窗都会被设置为开启状态，DOM层级最高的最后一个弹窗（对应列表末尾卡片的内容）会覆盖在最上层，因此无论点击哪张卡片，最终看到的都是最后一张卡片的内容。
• 状态逻辑混乱：原本用来存储选中卡片数据的isClicked状态，先后被赋值为数组、数组方法返回值、数字id，既没有正确保存选中卡片的完整数据，最终传给详情组件的beer变量还是循环遍历的临时值，完全没有用到存储的选中状态。
• 冗余无效操作：handleOpen方法内先对isClicked执行push操作，紧接着又把id赋值给同一个状态，前面的数组过滤、push操作完全没有生效。

1. 结构调整：把Modal从循环中移出，整个列表只保留一个全局的弹窗实例，不为每张卡片单独创建弹窗。
2. 状态重构：将逻辑混乱的isClicked状态替换为专门存储当前选中卡片对象的状态selectedBeer，初始值为null，不需要通过id反复过滤数组查询数据，点击时直接把完整的beer对象存入状态即可。
3. 传参调整：BeerCard的点击事件直接把当前beer对象传给打开弹窗的方法，不需要只传id再回头查询数据。
4. 弹窗内部渲染时，用存储的selectedBeer作为参数传给详情组件，替换原来循环遍历的临时beer变量。

状态定义 #

const [open, setOpen] = useState(false);
// 存储当前被点击的卡片完整数据
const [selectedBeer, setSelectedBeer] = useState(null);

事件处理 #

// 打开弹窗时直接存入当前选中的卡片对象
const handleOpen = (beerItem) => {
  setSelectedBeer(beerItem);
  setOpen(true);
};

// 关闭弹窗时清空选中数据
const handleClose = () => {
  setOpen(false);
  setSelectedBeer(null);
};

BeerCard组件点击逻辑调整 #

将原来只传id的点击事件，改为直接传入当前beer对象：

<div className='card' onClick={() => handleOpen(beer)}>

主渲染区域调整 #

循环仅渲染卡片列表，弹窗移到循环外单独渲染：

return (
  <div className='beer-container'>
    {/* 仅渲染卡片列表 */}
    {beers.map((beer) => (
      <BeerCard
        key={beer.id}
        beer={beer}
        handleOpen={handleOpen}
      />
    ))}

    {/* 全局唯一弹窗 */}
    <Modal
      aria-labelledby='transition-modal-title'
      aria-describedby='transition-modal-description'
      open={open}
      onClose={handleClose}
    >
      <DialogContent>
        {/* 选中卡片后才渲染详情组件，传入存储的selectedBeer */}
        {selectedBeer && (
          <BeerCardExpanded
            className={classes.paper}
            style={modalStyle}
            beer={selectedBeer}
            ref={ref}
          />
        )}
      </DialogContent>
    </Modal>
  </div>
);

额外优化点 #

• 列表渲染的key优先使用接口返回的稳定唯一id，代替可能重复的beer.name
• BeerCardExpanded内部food_pairing列表的key写法key={(item, index)}属于不规范的逗号表达式，实际只会取index作为key，建议直接写为key={item}（在配对食物无重复值的场景下）

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