吐司渲染错误的div onClick

Question

我有一些卡片，它们可以在垂直时间轴上单击显示有关人员的更多信息，单击时，它们会在同一侧的同一位置（第一个位置）（而不是在时间轴上的较低位置）呈现在同一位置人是，等等。

我使用地图功能动态渲染配置文件，以确保弹出正确的烤面包，然后检查state.popped是否等于地图中人物的相应键（因此，基本上是可迭代的索引）。对于在时间轴上较低的人，这仍然使我在顶部弹出。

状态，单击处理程序。

   this.state = {
      popped: false,
      showDetail: false
    };
  }

  handlePop = (e, i) => {
    e.preventDefault();

    this.setState({
      popped: i
    });
  };

这是渲染代码。

 <VerticalTimeline>
                {preTimelineObjects.map((card, i) => (
                  <React.Fragment key={i}>
                    {i % 2 === 0 ? (
                    ...
                    ...
                             <Button
                                size="small"
                                color="primary"
                                component={Link}
                                // to={card.path}
                                onClick={e => {
                                  this.handlePop(e, i);
                                  console.log(i);
                                }}
                              >
                                Learn More
                              </Button>
                       ...
                       ...
                       ... 
                       ...
                        <div
                          style={{
                            float: "right",
                            width: "30%",
                            height: "80"
                          }}
                        >
                          <Toast
                            show={this.state.popped === i}
                            onClose={this.handleRequestClose}
                            style={{
                              position: "absolute",
                              top: 100
                            }}
                          >