React中如何将父组件API的idDrink传递给Modal子组件替代Router方案

首先直接回答你的核心疑问：你判断Modal不需要路由、可以脱离Router实现的思路完全正确。Modal本质是由组件状态控制的浮层组件，只要不需要通过URL分享详情、支持浏览器前进后退控制弹窗开关，完全可以移除和Router的耦合，用组件状态替代原来useParams取路由参数的逻辑，没有多余的依赖。

你当前代码存在的核心问题 #

• 弹窗状态设计有缺陷：现在的open是全局共享的纯布尔值，没有和当前点击的饮品id绑定，只要弹窗打开，所有循环渲染的卡片都会触发弹窗逻辑，完全区分不开用户点的是哪张卡片
• props传值遗漏：父组件渲染<Modal>时没有把当前点击项的idDrink传进去，子组件虽然定义了接收idDrink的参数，但实际拿到的是undefined，拼出来的详情请求URL自然无效
• 组件位置错误：把Modal写在map循环内部，等于每张卡片都挂了一个独立的Modal实例，会造成大量重复渲染和无效API请求，完全没必要
• 语法小错误：map方法的回调参数写法漏了括号，现在的代码是跑不起来的

分步改造操作 #

1. 重构父组件Main的状态结构
   把原来只存布尔值的open状态，改成同时存储弹窗开关状态、当前选中饮品id的对象，替换原有状态定义：

// 原有状态：
// const [open, setOpen] = useState(false);
// 替换为：
const [selectedDrink, setSelectedDrink] = useState({
  isOpen: false,
  drinkId: null
})

2. 重构弹窗控制函数
   把原来只切布尔值的开关函数，改成点击时同步存入当前选中的饮品id，关闭时清空id：

// 替换原有handleOpen、handleClose方法
const handleOpenModal = (targetDrinkId) => {
  setSelectedDrink({
    isOpen: true,
    drinkId: targetDrinkId
  })
}

const handleCloseModal = () => {
  setSelectedDrink({
    isOpen: false,
    drinkId: null
  })
}

3. 调整渲染逻辑修正错误
   把写在map循环内部的Modal移到循环外部，全局只保留一个Modal实例，卡片点击时把对应的idDrink传入打开函数：

// 原有的卡片渲染部分，修正map的语法错误，绑定正确的点击事件
{data.drinks.map((drink) => {
  // 解构循环拿到的单个饮品数据
  const { idDrink, strDrink, strDrinkThumb } = drink
  return (
    <Container 
      key={idDrink} 
      onClick={() => handleOpenModal(idDrink)}
    >
      <img src={strDrinkThumb} alt={strDrink} />
      <div>{strDrink}</div>
    </Container>
  )
})}

// 把Modal移到循环外部，仅在弹窗打开时渲染，把存在状态里的drinkId传给子组件
{selectedDrink.isOpen && (
  <Portal>
    <Modal 
      idDrink={selectedDrink.drinkId} 
      onClose={handleCloseModal} 
    />
  </Portal>
)}

4. 子组件不需要额外改动
   你写的Modal组件逻辑本身是正确的：已经在useEffect的依赖项里加了idDrink，只要父组件能正确把对应id传进来，组件会自动拼接lookup.php?i=xxx的正确请求地址，拉取对应饮品的详情数据。

补充说明：如果后续有需要通过URL直接打开指定饮品详情、支持浏览器后退关闭弹窗的需求，再把Modal和Router做简单绑定即可；当前没有这类需求的话，用状态传值的方案比路由方案更轻量，没有冗余的路由跳转逻辑。

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