React项目点击列表项打开详情Modal总是传入最后一项如何解决？

• 全局共用同一个isOpen状态，未存储当前选中的商品信息：所有商品卡片的弹窗共用同一个开关状态，点击任意商品触发isOpen = true后，循环生成的9个弹窗会同时弹出，层级最高的最后一个商品弹窗会覆盖前面的所有弹窗，视觉上就表现为永远显示最后一项。
• 点击事件未携带当前商品参数：handleClick方法没有接收当前点击的商品作为入参，点击后无法识别用户选中的是哪一个商品。
• 模态框不应放在map循环内部：不需要为每个商品都生成单独的模态框实例，全局只需要一个模态框，动态传入选中的商品数据即可。

按照以下步骤修改代码即可解决问题：

1. 修改组件state，新增selectedItem字段存储当前选中的商品

constructor() {
  super();
  this.state = {
    name: 'React',
    apiData: [],
    isOpen: false,
    selectedItem: null // 新增字段
  };        
}  

2. 修改handleClick和onRequestClose方法，关联选中商品状态

let onRequestClose = () => {
  this.setState({ 
    isOpen: false,
    selectedItem: null // 关闭时清空选中商品
  });
}

let handleClick = (item) => {
  console.log("Clicked", item)
  this.setState({ 
    isOpen: true,
    selectedItem: item // 存储当前点击的商品
  });
}

3. 修改Card的点击事件，传入当前遍历到的item
   将原代码中Card的onClick={handleClick}修改为：

<Card key={item.itemNumber} tag="a" onClick={() => handleClick(item)} style={{ cursor: "pointer" }}>

4. 把模态框从map循环中移出，全局只保留一个实例
   删除map循环内部的{isOpen ? <ItemModal item={item} onRequestClose={onRequestClose} /> : null}代码，在CardGroup闭合标签之后插入模态框代码：

</CardGroup>
{/* 全局共用一个模态框，传入state中存储的选中商品 */}
{isOpen && <ItemModal item={this.state.selectedItem} onRequestClose={onRequestClose} />}
<Button id="slideRight" color="primary">{String.fromCharCode(8250)}</Button>

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