获取 2 API 并将两者的结果一起显示。 (反应.JS)

Question

I'm new to react.js, and currently conducting a project in my university. I am facing some problem regarding to Reactjs. Hopefully you guys can guide me to solve this.

So I have an Item Listing API which is gonna display in card component. I also have an API for Item Photo View, which is actually pass the id from Listing API and also will show in card component. So each item has differents image. Therefore, I am gonna call this two API in my react and I will see all the Item in the UI include their images.

This is Listing result from console log.:

Every item have different photo, so I create another API to view the item photo according to their id

Here is my front-end code, how I call the API:

    componentDidMount(){
        // console.log(loginEmail)
          fetch(`http://localhost:9000/api/item/list`,)
          .then((resp)=>{
            resp.json().then((res)=>{
             console.log(res.data);
              this.setState({data: res.data});

            }

            )
          })

          const id = this.state.data.id;

          fetch(`http://localhost:9000/api/item/photo/view/${id}`,)
          .then((resp)=>{
            resp.json().then((res)=>{
             console.log(res);
              this.setState({res});}
            )
          })
        }

Render component:

    render() {
        const data = this.state.data;
        return (
                <>
                    <div className="container my-5" >
                        <div className="row">
                            <div className="col-10 mx-auto col-md-6 text-center text-uppercase mb-3">
                                <h1 className="text-slanted">Item list</h1>
                            </div>
                        </div>
                        <div className="row">
                        <div className="col-10 mx-auto col-md-6 col-lg-4 my-3">
                        {
                                Object.keys(data).map((key) => 
                                <div className="card">
                                    {/* <img src="../{data[key].filename}" alt="Product"/> */} //no idea for the this, how to call the image
                                <div className="card-body text-capitalize">
                                <h6>{ data[key].organisation_name}</h6>
                                    <h6>asdasdaasd</h6>
                                </div>
                                <div className="card-footer">
                                    <button type="button" className="btn btn-primary text-capitalize" >
                                        details
                                    </button>
                                    Item Detail
                                </div>
                                </div>
                                )
                        }
                        </div>
                        </div>
                    </div>
                </>
            );
    }
}

The first Listing API is able to run, and the detail of item are able to show in card. But, I can't get the result of Second API(Item Image View). The image could not shown out, and getting the error of this on my preview

Is there any place I'm wrong? or there is another way that I can get the image from 2nd API and put it in card?

Answer 1

Put inside of the first API call the second API call:

componentDidMount(){
        // console.log(loginEmail)
          fetch(`http://localhost:9000/api/item/list`,)
          .then((resp)=>{
            resp.json().then((res)=>{
             console.log(res.data);
              this.setState({data: res.data});
              const id = data.id;

              fetch(`http://localhost:9000/api/item/photo/view/${id}`,)
              .then((resp)=>{
                resp.json().then((res)=>{
                console.log(res);
                  this.setState({res});}
                )
              })

            }

            )
          })
        }

Or use async/await syntax to improve the readability.