reactjs - Cómo combinar dos apis json en reaccionar según la identificación

How to combine two json apis in react based on id

Estoy intentando combinar dos apis json según el valor de identificación. ¿Hay alguna manera de lograrlo? Gracias. A continuación se muestra mi sección del código que he intentado hasta ahora:

  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)
    })
  }, []);

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

También puedes realizar la segunda solicitud en el primer useEffect y luego almacenar todo 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();
}, []);

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

Entonces, si entendí correctamente, primero debe realizar una llamada API que le proporcionará una lista de ID y debe completar (obtener los datos) de esos IDS basándose en una segunda llamada API.

Necesitas pasar "datos" en las dependencias de tu segundo useEffect. Esto le dice a React "siempre que los 'datos' cambien, haga lo siguiente".

Además, debes configurar los datos al final de tu ciclo o terminarás cambiándolos en cada iteración con 1 valor.

De todos modos, probablemente deberías usar la sintaxis "for await", ya que la lógica asíncrona no es fácilmente compatible con .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])

¡Avísame si funciona!

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