Javascript .map（）将错误的值映射到我的标题标记

我正在创建一个应用程序，允许员工从我们的商店预订设备。当我们点击“预订”按钮时，我正在使用reactstrap打开一个模式，以便员工可以添加更多信息。当模态打开时，我希望模态标题中的项目名称，但由于某种原因，当我使用

.map（）

时，它会为所有模态提供相同的标题，但

.map（）

是否适用于其他所有功能

为节省您的时间，仅此部分代码出现错误：

<ModalHeader toggle={this.toggle}>
  {item.name}
</ModalHeader>

{item.name}

我不确定问题出在哪里，希望能得到任何帮助

{events.map(item => {
  if (item.isBooked === true) {
    return (
      <div className="col-md-4 item p-2">
        <img className="item-img-booked" src={item.img} alt="" />
        <br />
        <br />
        <h6 className="text-center">{item.name}</h6>
        <button className="btn btn-success btn-sm m-1">Return</button>
      </div>
    );
  } else
    return (
      <div className="col-md-4 item p-2">
        <img className="item-img" src={item.img} alt="" />
        <br />
        <br />
        <h6 className="text-center">{item.name}</h6>
        <Button color="danger" onClick={this.toggle}>
          Book Out
        </Button>
        <div>
          <Modal isOpen={this.state.modal} toggle={this.toggle}>
            <ModalHeader toggle={this.toggle}>
              {item.name}
            </ModalHeader>
            <ModalBody>
              Lorem ipsum dolor sit amet, consectetur adipisicing
              elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Ut enim ad minim veniam, quis
              nostrud exercitation ullamco laboris nisi ut aliquip ex
              ea commodo consequat. Duis aute irure dolor in
              reprehenderit in voluptate velit esse cillum dolore eu
              fugiat nulla pariatur. Excepteur sint occaecat cupidatat
              non proident, sunt in culpa qui officia deserunt mollit
              anim id est laborum.
            </ModalBody>
            <ModalFooter>
              <Button color="primary" onClick={this.toggle}>
                Confrim
              </Button>
              {" "}
              <Button color="secondary" onClick={this.toggle}>
                Cancel
              </Button>
            </ModalFooter>
          </Modal>
        </div>
      </div>
    );
  }
)}

{events.map（项=>{
如果（item.isBooked==真）{
返回(




{item.name}
返回
);
}否则
返回(




{item.name}
预订
{item.name}
Lorem ipsum dolor sit amet，Concertetur Adipising
Elite，请暂时加入劳工等
多洛尔·马格纳·阿利夸，他是一个小威尼斯人
nostrud实习ullamco laboris nisi ut aliquip ex
这是一个共同的问题，两个人在一起
在多洛雷欧盟的卷发性软腭中的reprehenderit
福吉亚无财产权。圣奥卡塔塔除外
不轻率，不必为自己的行为负责
动物是劳动。
Confrim
{" "}
取消
);
}
)}

我猜您的切换功能会将所有模态都切换到一起，因此无论您在哪里单击，都只能看到最后一个模态

---

尝试使用数组来切换模式可见性状态。

我没有完全阅读您的问题，但从标题中我猜您的问题在于您没有为组件使用

键
属性，并且当
项.isBooked
更改时，您的组件也不会更改

那么，试试这个：
将
events.map（item=>{
更改为
events.map（（item，index）=>{
），以便在每次
map
呈现
events
中的项目时生成唯一键。
对于
div
s内部返回函数，请执行以下操作：

不要为每个项目创建模式，而是将模式移动到
.map（）
之外，并将项目保存在状态中。将每个项目的索引传递到
toggle
函数，并使用该索引从类似
this.state.events[index]的状态中的事件获取项目名称
。您的模式将从状态中提取名称

import React, { Component } from "react";
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";

export class EventsAll extends Component {
  state = {
    modal: false,
    index: -1,
    events: [],
    name: ""
  };

  toggle = index => {
    const ind = typeof index !== "number" ? -1 : index;

    this.setState(
      prevState => ({
        modal: !prevState.modal,
        index: ind
      }),
      () => {
        this.populateModalData();
      }
    );
  };

  populateModalData = () => {
    if (this.state.index < 0 || typeof this.state.index !== "number") {
      return;
    }

    const item = this.state.events[this.state.index];

    this.setState({
      name: item.name
    });
  };

  componentDidMount = () => {
    const { events } = this.props.events;

    this.setState({
      events: events
    });
  };

  render() {
    return (
      <div>
        <div className="row">
          {this.state.events.map((item, index) => {
            if (item.isBooked === true) {
              return (
                <div className="col-md-4 item p-2">
                  <img className="item-img-booked" src={item.img} alt="" />
                  <br />
                  <br />
                  <h6 className="text-center">{item.name}</h6>
                  <button className="btn btn-success btn-sm m-1">Return</button>
                </div>
              );
            } else
              return (
                <div className="col-md-4 item p-2">
                  <img className="item-img" src={item.img} alt="" />
                  <br />
                  <br />
                  <h6 className="text-center">{item.name}</h6>
                  <Button
                    val={index}
                    color="danger"
                    onClick={() => this.toggle(index)}
                  >
                    Book Out
                  </Button>
                  <div />
                </div>
              );
          })}
        </div>

        <Modal isOpen={this.state.modal} toggle={this.toggle}>
          <ModalHeader toggle={this.toggle}>{this.state.name}</ModalHeader>
          <ModalBody>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
            culpa qui officia deserunt mollit anim id est laborum.
          </ModalBody>
          <ModalFooter>
            <Button color="primary" onClick={this.toggle}>
              Confrim
            </Button>{" "}
            <Button color="secondary" onClick={this.toggle}>
              Cancel
            </Button>
          </ModalFooter>
        </Modal>
      </div>
    );
  }
}

export default EventsAll;

import React，{Component}来自“React”；
从“reactstrap”导入{Button，Modal，ModalHeader，ModalBody，ModalFooter}；
导出类EventsAll扩展组件{
状态={
莫代尔：错，
索引：-1，
事件：[]，
姓名：“
};
切换=索引=>{
const ind=索引类型！=“编号”？-1：索引；
这是我的国家(
prevState=>({
模态：！prevState.modal，
索引：ind
}),
() => {
this.populateModalData（）；
}
);
};
populateModalData=（）=>{
if（this.state.index<0 | | typeof this.state.index！=“number”）{
返回；
}
const item=this.state.events[this.state.index]；
这是我的国家({
名称：item.name
});
};
componentDidMount=（）=>{
const{events}=this.props.events；
这是我的国家({
事件：事件
});
};
render（）{
返回(
{this.state.events.map（（项，索引）=>{
如果（item.isBooked==真）{
返回(




{item.name}
返回
);
}否则
返回(




{item.name}
this.toggle（index）}
>
预订
);
})}
{this.state.name}
Lorem ipsum dolor sit amet，Concetetur Adipising Elite，sed do
临时性劳动和劳动合同
最低限度的成本、成本和实习成本由ullamco laboris nisi ut提供
我是一个普通消费者，我是一个酒鬼
这是一个充满活力的故事
不可忽视的例外情况，必须在
这是我的错。
Confrim
{" "}
取消
);
}
}
导出默认事件；

.map（）
使用数组中的数据，如果标题错误，则可能数组中标题的名称错误。@JuniusL。不幸的是，不是这样。数组中的名称是正确的。您可以看到我使用了{item.name}在同一映射中有两次。一次按预期工作，另一次使用阵列中最后一项的名称。请在此处@JuniusL创建一个简单的工作项目。下面是链接：我无法让reactstrap工作…我想看看代码，代码在哪里？你完全正确。当我删除reactstr时ap cdn并点击按钮，它显示了所有的模态。但是我如何使用数组来解决这个问题呢？如果我被认为是noobish，我很抱歉，我仍然是一个非常初级的开发人员。所以问题是t