Javascript 我怎样才能得到一个动态模式，也映射出我的卡列表？

每当我的程序运行时；这些卡在屏幕上显示正确的信息。但当我点击按钮打开模态时；它显示错误的信息，如错误的事件标题或多个状态

我的猜测是，卡片是映射到屏幕上的实际对象；但是模态是一个实体，所以它显示在那个时间点上的任何东西。如何正确地将模态映射到我的卡映射，以便动态显示有关该特定卡的模态信息

class Events extends Component {

state = {
    creating: false
};

startCreateEventHandler = () =>
    this.setState({ creating: true });

modalCancelHandler = () => {
    this.setState({ creating: false });
}

componentDidMount() {
    this.ensureDataFetched();
}

ensureDataFetched() {
    this.props.requestEvents();
}





render() {
    return (
        <div>
        {this.props.events.map(event => 
        <React.Fragment> 
            {this.state.creating &&
                <Modal title="Add Event" canCancel onCancel= 
                   {this.modalCancelHandler}>
                    <p>{event.title}</p>
                    <p>{event.start}</p>
                    <p>{event.ticketRequests.map(request =>
                        request.status)}</p>
                    <p>heyyy</p>

                </Modal>
            }

            <Card color="blue" className="card" style={{ width: '18red' 
}}>
                <CardBody className="card-body">
                    <CardTitle>{event.title}</CardTitle>
                    <CardText>Event Info</CardText>
                    <button className="requestButton" 
                    color="yellow">Request Tickets</button>
                    <button className="claimButton" onClick= 
                    {this.startCreateEventHandler}>Tickets Claimed: 
                    </button>
                </CardBody>
                </Card> 
        </React.Fragment>  

        )}    
        </div>
    );
}  
}

类事件扩展组件{
状态={
创建：false
};
startCreateEventHandler=（）=>
this.setState（{creating:true}）；
modalCancelHandler=（）=>{
this.setState（{creating:false}）；
}
componentDidMount（）{
this.ensureDataFetched（）；
}
ensureDataFetched（）{
this.props.requestEvents（）；
}
render（）{
返回(
{this.props.events.map（event=>
{this.state.creating&&
{event.title}

{event.start}

{event.ticketRequests.map（请求=>
请求（状态）}

嘿

}
{event.title}
事件信息
索取门票
索取门票：
)}    
);
}  
}

模态文件

import React from 'react';
import './modal.css';

const modal = props => (
<div className="modal">
    <header className="modal_header">
        <h1>{props.title}</h1>
    </header>
    <section className="modal_content">{props.children}</section>
    <section className="modal_actions">

        {props.canCancel && (
            <button className="btn" onClick={props.onCancel}>
                Cancel
            </button>
        )}
    </section>
</div>

);

export default modal;

从“React”导入React；
导入“/modal.css”；
常量模态=道具=>(
{props.title}
{props.children}
{props.canCancel&&(
取消
)}
);
导出默认模式；

这里发生的事情是，您正在同时打开所有模态

您可以做的是将每个

事件的索引（或唯一id）保持在状态，并且仅当索引/唯一id匹配时才呈现模式

class Events extends Component {

  state = {
    creatingId: -1
  };

  startCreateEventHandler = creatingId =>
    this.setState({ creatingId });

  modalCancelHandler = () => {
    this.setState({ creatingId: -1 });
  }

  componentDidMount() {
    this.ensureDataFetched();
  }

  ensureDataFetched() {
    this.props.requestEvents();
  }

  render() {
    return (
        <div>
        {this.props.events.map((event, i) => 
        <React.Fragment> 
            // the best way of doing it is with unique id property, but it also works with index
            // {this.state.creatingId == event.id &&
               {this.state.creatingId == i &&
                <Modal title="Add Event" canCancel onCancel= 
                   {this.modalCancelHandler}>
                    <p>{event.title}</p>
                    <p>{event.start}</p>
                    <p>{event.ticketRequests.map(request =>
                        request.status)}</p>
                    <p>heyyy</p>

                </Modal>
            }

            <Card color="blue" className="card" style={{ width: '18red' }}>
                <CardBody className="card-body">
                    <CardTitle>{event.title}</CardTitle>
                    <CardText>Event Info</CardText>
                    <button className="requestButton" 
                    color="yellow">Request Tickets</button>
                    <button className="claimButton" onClick= 
                    {() => this.startCreateEventHandler(i)}>Tickets Claimed: 
                    </button>
                </CardBody>
                </Card> 
        </React.Fragment>  

        )}    
        </div>
    );     
  }  
}

类事件扩展组件{
状态={
创建ID:-1
};
startCreateEventHandler=创建ID=>
this.setState（{creatingId}）；
modalCancelHandler=（）=>{
this.setState（{creatingId:-1}）；
}
componentDidMount（）{
this.ensureDataFetched（）；
}
ensureDataFetched（）{
this.props.requestEvents（）；
}
render（）{
返回(
{this.props.events.map（（event，i）=>
//最好的方法是使用unique id属性，但也可以使用索引
//{this.state.creatingId==event.id&&
{this.state.creatingId==i&&
{event.title}

{event.start}

{event.ticketRequests.map（请求=>
请求（状态）}

嘿

}
{event.title}
事件信息
索取门票
声明的.startCreateEventHandler（i）}>票证：
)}    
);     
}  
}
谢谢，这是一个明智的做法，它解决了我的具体问题！我确实注意到我的“取消”按钮不起作用了，你知道为什么吗？@Aktzin我犯了一个小错误，但刚刚修复，请检查我的编辑你能帮我找一个和你刚才做的非常相似的人吗？我试图映射嵌套的“ticketRequests”数组，但我始终得到的输出是所有事件，而不是那个非常特殊的事件。我尝试使用eventId键；但我不相信我做得对。忽略最后的评论，显然我在API中设置的变量不正确。