React afterAsync関数で配列からオブジェクトをレンダリングする

dataオブジェクトのコレクションを含む配列が自分の状態にありますが、オブジェクトに格納されている情報の一部にアクセスしてレンダリングしようとすると、期待されるテキストがページに表示されません。

このための現在のコードは、次のようにレンダリング関数にあります。

<ul>
    {this.state.data.map(match =>
    <Link to={'teams/'+ team.homeId} key={match.id}><li>{match.homeTeam}</li></Link>
<ul>

コンソールの要素を確認するとundefined、データがどこにあるのかがわかります。

情報は関数内のawait axios.get()リクエスト内で取得されasync componentDidMount()ます。これにより、レンダリングが発生したときにデータがまだ取得されていないため、データが正しく表示されない可能性があると思われますが、よくわかりません。

私は以前に定義しようとしたlet match = this.state.data || {}ので、後は私のレンダリングはリロードするだろうと、私のレンダリングの初めにsetState、私の中で行われたcomponentDidMount、しかし、これは動作しませんでした。任意の方向をいただければ幸いです。

モンテクリストの要求に従って編集します。

class Welcome extends Component {
    constructor(props) {
        super(props)
        this.state = {
            data: []
        }
    }


    async componentDidMount() {
        let res = await axios.get(`https://soccer.sportmonks.com/api/v2.0/livescores?api_token=${API}`)
        let matchInfo = new Array(res.data.data.length).fill().map(_ => ({}))

        res.data.data.forEach((id, i) => Object.assign(matchInfo[i], {id: id.id, homeScore: id.scores.localteam_score}, {awayScore: id.scores.visitorteam_score}))

        res.data.data.forEach((id, i) => {
            axios.get(`https://soccer.sportmonks.com/api/v2.0/teams/${id.localteam_id}?api_token=${API}`)
            .then(res1 => {
                Object.assign(matchInfo[i], {homeId: res1.data.data.id, homeTeam: res1.data.data.name})
            })
        })
        res.data.data.forEach((id, i) => {
            axios.get(`https://soccer.sportmonks.com/api/v2.0/teams/${id.visitorteam_id}?api_token=${API}`)
            .then(res2 => {
                Object.assign(matchInfo[i], {awayId: res2.data.data.id, awayTeam: res2.data.data.name})
            })
        })
        res.data.data.forEach((id, i) => {axios.get(`https://soccer.sportmonks.com/api/v2.0/leagues/${id.league_id}?api_token=${API}`)
            .then(res3 => {
                Object.assign(matchInfo[i], {leagueName: res3.data.data.name})
            })
        })
        this.setState({
            data: [...this.state.data, ...matchInfo]
        })
    }


    render() { 
        return ( 
            <div>
                <p className="text-xl font-semibold">Live Matches</p>
                <div>
                    <ul>
                        {this.state.data.map(match => 
                        <Link to={'teams/'+ match.homeId} key={match.id}><li>{match.homeTeam}</li></Link>)}
                    </ul>
                </div>
            </div>
         );
    }
}

export default Welcome;