Question

我正在进行两个API调用；第一个用于以表格格式呈现数据列表。每行中都有一个按钮。在单击按钮时，我启动了第二个API（具有第一个API的data属性）。现在，我想在单击按钮并打开模式时查看日期。在映射第一名时，我需要再次映射以单击按钮查看单个数据。

在给定的代码段中-我试图查看来自第一个API调用的数据，并向其中添加了一个按钮。

import React, { Component } from 'react';
import { Table, Button, Modal } from 'react-bootstrap';

import axios from 'axios';

class TableData extends Component {
  state = {
    loading: true,
    TableData: [],
    show: false,
    roomData: [],
  };

  handleClose = () => {
    this.setState({ show: false });
  };

  handleShow = () => {
    this.setState({ show: true });
  };

  getRoomInfo = (roomName) => {
    this.handleShow();
    const url = `https://dev.meets.openhouse.study/room_participants/${roomName}`;
    axios.get(url).then((res) => {
      this.setState({ roomData: res.data });
    });
  };

  componentDidMount() {
    const url = 'https://dev.meets.openhouse.study/meets_teachers/';
    axios.get(url).then((res) => {
      this.setState({ TableData: res.data });
      this.setState({ loading: false });
    });
  }

  render() {
    return (
      <div>
        <Table>
          <thead>
            <tr>
              <th>Room Name</th>
              <th>Teacher Name</th>
              <th>Subject</th>
              <th>Class</th>
            </tr>
          </thead>

          {this.state.TableData.map((data) => (
            <tr key={data.created_at}>
              <td>{data.room_name}</td>
              <td>{data.teacher.user.full_name}</td>
              <td>{data.subjects_str}</td>
              <td>{data.classes_str}</td>
              <Button
                variant="secondary"
                onClick={() => this.getRoomInfo(data.room_name)}
              >
                Details
              </Button>

              {this.state.roomData.map((room) => (
                <div key={room.created_at}>
                  <Modal
                    size="lg"
                    aria-labelledby="contained-modal-title-vcenter"
                    centered
                    show={this.state.show}
                    onHide={this.handleClose}
                  >
                    <Modal.Header closeButton>
                      <Modal.Title>{room.room}</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>reading this text in a modal!</Modal.Body>
                    <Modal.Footer>
                      <Button variant="secondary" onClick={this.handleClose}>
                        Close
                      </Button>
                    </Modal.Footer>
                  </Modal>
                </div>
              ))}
            </tr>
          ))}
        </Table>
      </div>
    );
  }
}

export default TableData;

Answer 1

如果您希望模态显示第二个api调用的结果，则应将其移至this.state.TableData.map((data) => (之外

并在其中映射结果。我不知道模态应该显示什么内容，但是这是怎么做的。

希望这会有所帮助。

import React, { Component } from "react";
import { Table, Button, Modal } from "react-bootstrap";

import axios from "axios";

class TableData extends Component {
  state = {
    loading: true,
    TableData: [],
    show: false,
    roomData: []
  };

  handleClose = () => {
    this.setState({ show: false });
  };

  handleShow = () => {
    this.setState({ show: true });
  };

  getRoomInfo = roomName => {
    this.handleShow();
    const url = `https://dev.meets.openhouse.study/room_participants/${roomName}`;
    axios.get(url).then(res => {
      this.setState({ roomData: res.data });
      console.log(res.data);
    });
  };

  componentDidMount() {
    const url = "https://dev.meets.openhouse.study/meets_teachers/";
    axios.get(url).then(res => {
      this.setState({ TableData: res.data });
      this.setState({ loading: false });
    });
  }

  render() {
    return (
      <div>
        <Table>
          <thead>
            <tr>
              <th>Room Name</th>
              <th>Teacher Name</th>
              <th>Subject</th>
              <th>Class</th>
            </tr>
          </thead>

          {this.state.TableData.map(data => (
            <tr key={data.created_at}>
              <td>{data.room_name}</td>
              <td>{data.teacher.user.full_name}</td>
              <td>{data.subjects_str}</td>
              <td>{data.classes_str}</td>
              <Button
                variant="secondary"
                onClick={() => this.getRoomInfo(data.room_name)}
              >
                Details
              </Button>
            </tr>
          ))}
        </Table>
        <div>
          <Modal
            size="lg"
            aria-labelledby="contained-modal-title-vcenter"
            centered
            show={this.state.show}
            onHide={this.handleClose}
          >
            <Modal.Header closeButton>
              <Modal.Title>{"room.room"}</Modal.Title>
            </Modal.Header>
            <Modal.Body>
              {this.state.roomData.map(room => (
                <p>Room: {room.room}</p>
              ))}
            </Modal.Body>
            <Modal.Footer>
              <Button variant="secondary" onClick={this.handleClose}>
                Close
              </Button>
            </Modal.Footer>
          </Modal>
        </div>
      </div>
    );
  }
}

export default TableData;

https://codesandbox.io/s/runtime-microservice-t2jbq?file=/src/App.js

如何在map函数内部进行映射并在Reactjs中显示数据

1 个答案: