如何使用第一個 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 中實現這一點？

在給定的代碼片段中-我試圖查看來自第一個 API 調用的數據並向其添加了一個按鈕。 現在我需要在這個 URL - https://dev.meets.openhouse.study/room_participants/ ${room_name} 中觸發 Button Clik 的第二次 API 調用（room_name 將從第一個 API 調用中獲取）。

Answer 1

我們可以為按鈕 onclick 綁定一個匿名的 function。從那個方法，我們可以像下面這樣調用我們的組件方法。

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

完整代碼片段：

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;