Как я могу передать JSON массив объектов в мой URL API? (В РЕАКЦИИ)

Question

Мне нужно получить 2 api из бэкэнда и попытаться получить результат из этих двух. но на данный момент результат JSON, который я получаю от первого API, - это объектный массив в JSON. Мне нужно передать идентификатор из первого API (используя setState) во второй API для переменных пути. Но когда я делаю это по-своему, мне не удается получить данные. Рассмотрим код ниже:

      componentDidMount(){
        // console.log(loginEmail)
          fetch(`http://localhost:9000/api/item/list`,)
          .then((resp)=>{
            resp.json().then((res)=>{
             console.log(res.data);
             // localStorage.setItem('id', res.data.user_info.id);
              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);
             // localStorage.setItem('id', res.data.user_info.id);
              this.setState({res});}
            )
          })


        }

Вот мой ответ JSON Результат почтальона

Вот ошибка, которую я получаю (обновлено):

Вот мой консольный журнал моего API листинга (Обновлено):

Answer 1

Fetch является асинхронным, что означает, что javascript будет извлекать данные по первому вызову без ожидания и продолжит до второго вызова извлечения, где идентификатор не определен, или Null.

Для исправления этого Вы можете использовать обещания следующим образом

Пример моего кода

import React from "react";

class Home extends React.Component {
  constructor() {
    super();
    this.state = {
      res: [],
    }
  }

// http://jsonplaceholder.typicode.com/users
fetchData(url) {
  return new Promise((resolve, reject) => {
      fetch(url)
          .then((resp) => {
              resp.json().then((res) => {
                  console.log(res);
                  // localStorage.setItem('id', res.data.user_info.id);
                  resolve(res);
              }
              )
          })
  })
}

async componentDidMount() {
  let data = await this.fetchData("http://jsonplaceholder.typicode.com/users");
  console.log("data :", data);
  let id = data[0].id;
  console.log("Id :", id);
  let newData = await this.fetchData(`http://jsonplaceholder.typicode.com/users/${id}`); 
  this.setState({ res: newData });
}

  render() {
    return (
      <div>
        Call API
      </div>      
    )
  }
}

export default Home

Адаптировано к вашему коду

fetchData(url) {
    return new Promise((resolve, reject) => {
        fetch(url)
            .then((resp) => {
                resp.json().then((res) => {
                    console.log(res.data);
                    // localStorage.setItem('id', res.data.user_info.id);
                    resolve(res.data);
                }
                )
            })
    })
}

async componentDidMount() {
    // console.log(loginEmail)
    let data = await this.fetchData("http://localhost:9000/api/item/list");
    let id = data.id;
    let newData = await this.fetchData(`http://localhost:9000/api/item/photo/view/${id}`); 
    this.setState({ res: newData });
}

Answer 2

Вы должны убедиться, что каждый идентификатор получает соответствующие результаты.

 async componentDidMount() {
 await fetch(`http://localhost:9000/api/item/list`)
.then(async (resp) => {
  let req_ = resp.map((item)=>{
   return await fetch(`http://localhost:9000/api/item/photo/view/${item.id}`)
  })
 let result = Promise.all(req_)
 console.log(result)
})
}

Answer 3

Проблема в том, что fetch возвращает Promise, поэтому в строке

const id = this.state.data.id;

Данные еще не заполнены.

Необходимо объединить два запроса в следующим образом:

componentDidMount() {
  fetch(`http://localhost:9000/api/item/list`)
    .then((resp) => {
      // return the id
    })
    .then((id) => {
      fetch(`http://localhost:9000/api/item/photo/view/${id}`)
        .then((resp) => {
         // do what you need with the result
        })
    })
}