如何在 map function 內的 map 並在 ZFCE39BEF5E4BD9F936A35757917A00 中顯示數據

Question

我正在撥打兩個 API 電話； 第一個用於以表格格式呈現數據列表。 在每一行中，都有一個按鈕。 在單擊按鈕時，我正在觸發第二個 API（具有來自第一個的數據屬性）。 現在我想在單擊按鈕並打開模式時查看日期。 當我映射第一名時，我需要再次 map 以通過單擊按鈕查看單個數據。

在給定的代碼片段中 - 我正在嘗試查看來自第一個 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) => (

和 map 結果在里面。 我不知道 modal 應該顯示什么內容，但這是可以做到的。

希望它會有所幫助。

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