如何使用第一个 API 调用中的数据并在我的第二个 API 调用中使用该数据？

Question

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

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

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

  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.handleShow}>
                Details
              </Button>
              <Modal
                size="lg"
                aria-labelledby="contained-modal-title-vcenter"
                centered
                show={this.state.show}
                onHide={this.handleClose}
              >
                <Modal.Header closeButton>
                  <Modal.Title>Modal heading</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>
            </tr>
          ))}
        </Table>
      </div>
    );
  }
}

export default TableData;

我正在进行两次 API 调用；第一个用于以表格格式呈现数据列表。在每个列表中都有一个按钮。在单击按钮时，我试图触发第二个 Api（具有来自第一个的数据属性）。 如何在 Reactjs 中实现这一点？

在给定的代码 sn-p 中 - 我正在尝试查看来自第一个 API 调用的数据并为其添加了一个按钮。现在我需要在此 URL 中对 Button Clik 进行第二次 API 调用 - https://dev.meets.openhouse.study/room_participants/${room_name}（room_name 将来自第一次 API 调用）。

Answer 1

我们可以为按钮的点击绑定一个匿名函数。通过该方法，我们可以像下面这样调用我们的组件方法。

<Button variant="secondary" onClick={() => this.getRoomInfo(data.room_name) }>

完整代码sn-p：

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

      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) => {
            console.log(res)
        });
      }

      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>
                  <Modal
                    size="lg"
                    aria-labelledby="contained-modal-title-vcenter"
                    centered
                    show={this.state.show}
                    onHide={this.handleClose}
                  >
                    <Modal.Header closeButton>
                      <Modal.Title>Modal heading</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>
                </tr>
              ))}
            </Table>
          </div>
        );
      }
    }

    export default TableData;