Получить 2 API и показать оба результата вместе. (React. JS)

Question

Я новичок, чтобы реагировать. js, и в настоящее время веду проект в моем университете. У меня проблема с Reactjs. Надеюсь, вы, ребята, поможете мне решить эту проблему.

Итак, у меня есть API Список элементов, который будет отображаться в компоненте карты. У меня также есть API для просмотра фотографий элементов, который фактически передает идентификатор из API листинга и также отображается в компоненте карты. Таким образом, каждый элемент имеет разное изображение. Поэтому я буду называть эти два API в своем ответе, и я увижу, что все элементы в интерфейсе включают их изображения.

Это результат листинга из журнала консоли.:

Каждый элемент имеет свою фотографию, поэтому я создаю другой API для просмотра фотография элемента в соответствии с их идентификатором

Вот мой код переднего плана, как я называю 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() {
        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>
                </>
            );
    }
}

Первый листинг API может работать, а детали элемента могут отображаться на карте. Но я не могу получить результат Второго API (View Image View). Изображение не может быть показано, и я получаю ошибку об этом в моем предварительном просмотре

Есть ли место, где я ошибаюсь? или есть другой способ получить изображение из 2-го API и поместить его в карту?

Answer 1

Поместите внутрь первого вызова API второй вызов 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 = data.id;

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

            }

            )
          })
        }

Или используйте синтаксис async / await для улучшения читабельности.