javascript - React Hook，来自不同 Axios 调用的对象数组

Question

我懂了：

import React, { useState, useEffect } from 'react';
import axios from "axios";

function InsideRacesComponent() {

    const route = "http://localhost:4000/api/standings";
    const [data, setData] = useState([{ raceName: "", raceCountryFlag: "" }]);

    useEffect(() => {
        axios.get(route).then(res => {

            //The arrays that I want to fetch data and combine
            const raceNameData = res.data[0].InsideRaceResults
            const raceCountryData = res.data[0].RaceResults

            
            raceNameData.forEach(races => {
                const raceName = races.gpId;
            });


            raceCountryData.forEach(races => {
                const flagLink = races.gpCountryImage;
            })
        })
    }, []);

    return (
      //some html
    )

}

如果我记录raceNameData，它看起来像这样：

(17) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {_id: "5fe8c55830013624e4716eed", gpId: "Austrian Grand Prix", grandPrixDate: "Sunday, July 5", grandPrixTrack: "Red Bull Ring", RaceResult: Array(20)}
1: {_id: "5fe8c55830013624e4716f02", gpId: "Styrian Grand Prix", grandPrixDate: "Sunday, July 12", grandPrixTrack: "Red Bull Ring", RaceResult: Array(20)}
2: {_id: "5fe8c55830013624e4716f17", gpId: "Hungarian Grand Prix", grandPrixDate: "Sunday, July 19", grandPrixTrack: "Hungaroring", RaceResult: Array(20)}
...

像这样的raceCountryData：

(17) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {_id: "5fe8c55830013624e4716edc", gpCountryName: "Austria", gpCountryImage: "https://upload.wikimedia.org/wikipedia/commons/thu…lag_of_Austria.svg/1200px-Flag_of_Austria.svg.png"}
1: {_id: "5fe8c55830013624e4716edd", gpCountryName: "Austria", gpCountryImage: "https://upload.wikimedia.org/wikipedia/commons/thu…lag_of_Austria.svg/1200px-Flag_of_Austria.svg.png"}
2: {_id: "5fe8c55830013624e4716ede", gpCountryName: "Hungary", gpCountryImage: "https://upload.wikimedia.org/wikipedia/commons/thu…lag_of_Hungary.svg/1920px-Flag_of_Hungary.svg.png"}
...

当我从 React Hook 记录数据时，我正在寻找这个

console.log("data: " + data);

// data: [{ raceName: "Austrian Grand Prix", raceCountryFlag: "https://upload.wikimedia.org/wikipedia/commons/thu…lag_of_Austria.svg/1200px-Flag_of_Austria.svg.png" }, { raceName: "Styrian Grand Prix", raceCountryFlag: "https://upload.wikimedia.org/wikipedia/commons/thu…lag_of_Austria.svg/1200px-Flag_of_Austria.svg.png" } , { raceName: "Hungarian Grand Prix", raceCountryFlag: "https://upload.wikimedia.org/wikipedia/commons/thu…lag_of_Hungary.svg/1920px-Flag_of_Hungary.svg.png" }, ...]

我已经在每个“array.forEach”中尝试过这个：

setData(prevValue => [...prevValue, { raceName: raceName, raceCountryFlag: "" }]

//and

setData(prevValue => [...prevValue, { raceName: "", raceCountryFlag: flagLink }]

当然我的方法没有逻辑......

谢谢！

标签： javascriptarraysreactjs

Answer 1

我假设raceNameData和raceCountryData数组具有相同的长度。用来Array.map代替forEach.

const data = raceNameData.map((race, index) => ({
  raceName: race.gpId,
  raceCountryFlag: raceCountryData[index].gpCountryImage
}));