点击动态卡片时如何展示对应ID的Modal？当前仅显示最后一个ID

问题根源 #

1. 重复渲染Modal：你在data.map循环里渲染了多个Modal组件，所有Modal共享同一个isOpen状态。当isOpen变为true时，所有Modal都会触发显示，而DOM中最后一个Modal会处于视觉最上层，所以无论点击哪个卡片，看到的都是最后一条数据的ID。
2. 状态笔误：handleOpen里的setOpen(true)是错误的，你的状态变量是isOpen，对应的setter应该是setisOpen(true)。

修复方案 #

只需要渲染一个Modal，用额外状态存储当前点击卡片的ID，动态绑定到Modal的title上即可：

修改主应用代码

1. 新增状态存储当前选中的ID
2. 点击卡片时同步设置选中ID与Modal的打开状态
3. 将Modal移出循环，只渲染一次

// 状态定义
const [isOpen, setisOpen] = useState(false);
const [currentId, setCurrentId] = useState(null); // 新增：存储当前点击的卡片ID

const handleOpen = (id) => {
  console.log(id);
  setCurrentId(id); // 设置当前选中的ID
  setisOpen(true); // 修正笔误：用正确的setter
};

const handleClose = () => {
  setisOpen(false);
  setCurrentId(null); // 关闭弹窗时清空选中ID
};

// 渲染部分
{data.map((i) => (
  <Grid key={i.id}> {/* 优化key：直接用数据的唯一ID，避免index带来的问题 */}
    <Card onClick={() => handleOpen(i.id)}>
      <CardHeader title={i.title} />
    </Card>
  </Grid>
))}

{/* 只渲染一个Modal，放在循环外部 */}
<Modal 
  isOpen={isOpen} 
  handleClose={handleClose} 
  title={currentId}
/>

Modal组件无需修改

保持你原有的Modal复用组件代码即可。

额外优化提示 #

• 不要用data.indexOf(i)作为Grid的key，当数据顺序变化时会导致组件错误复用，直接使用每个数据项的唯一标识i.id更可靠。

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