reactjs - So kombinieren Sie zwei JSON-APIs in React basierend auf der ID

How to combine two json apis in react based on id

Ich versuche, zwei JSON-APIs basierend auf dem ID-Wert zu kombinieren. Gibt es eine Möglichkeit, das zu erreichen? Danke. Unten ist mein Abschnitt des Codes, den ich bisher versucht habe:

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

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

Sie können die zweite Anfrage auch im ersten useEffect stellen und dann alles zusammen speichern

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

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

Wenn ich das richtig verstehe, haben Sie also zunächst einen API-Aufruf, der Ihnen eine Liste von IDs bereitstellt, und Sie müssen diese IDs basierend auf einem zweiten API-Aufruf ausfüllen (die Daten abrufen).

Sie müssen „Daten“ in den Abhängigkeiten Ihres zweiten useEffects übergeben. Dies teilt React mit: „Wenn sich ‚Daten‘ ändern, gehen Sie bitte wie folgt vor.“

Außerdem sollten Sie die Daten am Ende Ihrer Schleife festlegen, sonst ändern Sie sie bei jeder Iteration mit einem Wert!

Jedenfalls sollten Sie wahrscheinlich die „for-await“-Syntax verwenden, da asynchrone Logik nicht ohne weiteres mit .map kompatibel ist.

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])

Lassen Sie mich wissen, ob es funktioniert!

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