Question

我正在创建一个应用程序，允许工作人员从我们的商店预订设备。当我们单击“预订”按钮时，我正在使用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

与其为每个项目创建模态，不如将模态移到.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

Answer 2

我猜想您的切换功能会将所有模态一起切换，因此无论您单击哪里，只有最后一个模态对您可见。

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

Answer 3

我没有完全阅读您的问题，但是从标题来看，我想您的问题是您没有为组件使用if c1 == 1:属性，并且当c1 = "Select * From tag_logs where reader_id = 'Reader_001' and timestamp > '" + str(t) +"' and tag_no = '55992086130'" c1 = mycursor.fetchone() #print(c1) #mycursor.execute("Select * From tag_logs where reader_id = 'Reader_001' and timestamp >='" + str(t) +"' and tag_no = '55992086130'") cursor = mydb.cursor(buffered=True) if c1 == 1: ser.write(b'H') print('done') else: ser.write(b'L') print('deny') mycursor.execute(c1)更改时，您的组件却没有也不会改变。

因此，请尝试以下操作：将key更改为item.isBooked，以便每次events.map(item => {从events.map((item, index) => {渲染项目时生成唯一密钥。对于您的map内的返回函数，请执行以下操作： events div

.map（）将错误的值映射到我的标头标签

3 个答案: