reactjs - Comment combiner deux API JSON en réaction en fonction de l'identifiant

How to combine two json apis in react based on id

J'essaie de combiner deux API JSON en fonction de la valeur de l'identifiant. Y a-t-il un moyen d'y parvenir ? Merci. Vous trouverez ci-dessous ma section du code que j'ai essayé jusqu'à présent :

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

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

Vous pouvez également faire la deuxième requête dans le premier useEffect, puis tout stocker ensemble

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

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

Donc, si je comprends bien, vous avez d'abord un appel API qui vous fournira une liste d'ID et vous devez remplir (obtenir les données) à partir de ces IDS en fonction d'un deuxième appel API.

Vous devez transmettre des "données" dans les dépendances de votre deuxième useEffect. Cela indique à React "chaque fois que les "données" changent, veuillez procéder comme suit".

De plus, vous devez définir les données à la fin de votre boucle, sinon vous finirez par les modifier à chaque itération avec 1 valeur !

Quoi qu'il en soit, vous devriez probablement utiliser la syntaxe "for wait" car la logique asynchrone n'est pas facilement compatible avec .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])

Faites-moi savoir si cela fonctionne !

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