reactjs - Como combinar duas APIs json em reação com base no id

How to combine two json apis in react based on id

Estou tentando combinar duas APIs JSON com base no valor do ID. Existe uma maneira de conseguir isso? Obrigado. Abaixo está minha seção do código que tentei até agora:

  const [data, setdata] = useState([])
  const [runs, setruns] = useState([])

  //get data from the first api
  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await axios.get('http://localhost:8000/tasks?format=json');
        setdata(res.data['results']);
      } catch (e) {
        console.log(e)
      }
    }
    fetchData();
  }, []);

  //map the rows of data from the api above to obtain values based on id value
  useEffect(() => {
    data.map(row => {
      console.log(row.id)
      const fetchRuns = async () => {
        const res2 = await axios.get(`http://localhost:8000/task/${row.id}/runs`);
        setruns(res2.data)
      }
      fetchRuns();
      row.rundata = runs
      console.log('row:', row)
    })
  }, []);

-----------------------------------

Você também pode fazer a segunda solicitação no primeiro useEffect e depois armazenar tudo junto

useEffect(() => {
  const fetchData = async () => {
    try {
      const res = await axios.get('http://localhost:8000/tasks?format=json'); 
      const arr = [];     
      res.data.result.map(row => {
        arr.push(axios.get(`http://localhost:8000/task/${row.id}/runs`));
      }

      const res2 = await axios.all(arr);
      setdata(); // here you will need to join both results, but to help you better we will need the structure of both
    } catch (e) {
      console.log(e)
    }
  }
  fetchData();
}, []);

-----------------------------------

Então, se bem entendi, você tem primeiro uma chamada de API que fornecerá uma lista de IDs e você precisa preencher (obter os dados) desses IDS com base em uma segunda chamada de API.

Você precisa passar "data" nas dependências do seu segundo useEffect. Isso diz ao React "sempre que os 'dados' mudarem, faça o seguinte".

Além disso, você deve definir os dados no final do seu loop ou acabará alterando-os a cada iteração com 1 valor!

De qualquer forma, você provavelmente deveria usar a sintaxe "for await", já que a lógica assíncrona não é facilmente compatível com .map.

const [data, setdata] = useState([])
const [runs, setruns] = useState([])

useEffect(() => {
const fetchData = async () => {
  try {
    const res = await axios.get('http://localhost:8000/tasks?format=json');
    setdata(res.data['results']);
  } catch (e) {
    console.log(e)
  }
}
fetchData();
}, []);


async function populate(data){
 let populatedData = []
 for await (let row of rows){
   const res2 = await axios.get(`http://localhost:8000/task/${row.id}/runs`)
   populatedData.push(res2.data)
  }
  setruns(populatedData)
 }
   
useEffect(() => {
 if (data.length === 0) return
 populate(data)
},[data])

Me avise se funcionar!

-----------------------------------