如何使用第一个 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;

I am making two API calls; 1st one is used for rendering a list of data in a table format. In each list there is a button. And while clicking the button I am trying to fire the 2nd Api(with a data property from 1st one). How can I achieve this in Reactjs?

In the given code snippet - I am trying to view the data which is coming from the 1st API call and added a button to it. now I need to Fire a 2nd API call on Button Clik, in this URL - https://dev.meets.openhouse.study/room_participants/ ${room_name} (room_name will get from 1st API call).

Answer 1

We can bind an anonymous function for button onclick. From that method, we could call our component method like below.

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

Full code snippet:

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;