.map() 将错误的值映射到我的 header 标签

Question

我正在创建一个应用程序，允许员工从我们的商店预订设备。当我们单击 'Book Out' 按钮时，我正在使用 reactstrap 打开一个模式，以便员工可以添加更多信息。当模态打开时，我想要模态标题中的项目名称，但出于某种原因，当我使用 .map() 时，它会为所有模态提供相同的标题，但 .map() 对其他所有内容都有效？

为了节省您的时间，错误仅出现在这段代码中：

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

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

{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>
    );
  }
)}

Answer 1

我猜你的切换功能会同时切换所有模态框，所以无论你点击哪里，你都只能看到最后一个模态框。

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

Answer 2

我没有完全阅读你的问题，但从标题我猜你的问题是你没有为你的组件使用 key 属性，当 item.isBooked 改变时，你的组件也没有改变。

所以，试试这个：将 events.map(item => { 更改为 events.map((item, index) => { 以便在每次 map 从 events 呈现项目时生成唯一键。对于 return 函数中的 divs，请执行以下操作： <div className="col-md-4 item p-2" key={index}> <div className="col-md-4 item p-2" key={index}>

Answer 3

不是为每个项目创建模态，而是将模态移到 .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;

working demo

.map() 将错误的值映射到我的 header 标签

.map() is mapping the wrong value to my header tags

javascript

reactjs

reactstrap