在调用呈现函数之前，等待将信息添加到我的状态？

Question

我想要一些建议，说明如何以允许我在初始页面加载时以我的状态显示data数组中的信息的方式重组/更改以下代码。

    async componentDidMount() {
        const { id } = this.props.match.params
        const soccerApi = axios.create({
          baseURL: 'https://soccer.sportmonks.com/api/v2.0',
          params: { api_token: API }
        });
        const leagueResponse = await soccerApi.get(`leagues/${id}`)
        const standingsResponse = await soccerApi.get(`standings/season/${leagueResponse.data.data.current_season_id}`)

        const leagueInfo = {
            leagueName: leagueResponse.data.data.name,
            leagueLogo: leagueResponse.data.data.logo_path,
            standings: standingsResponse.data.data[0].standings.data
        }
        this.setState({
            data:[...this.state.data, leagueInfo]
        })
    }

当前，当尝试在页面第一次加载时显示存储在data中的信息时，我会得到错误cannot read property 'leagueName' of undefined，尽管能够使用页面上的一个按钮成功地显示该信息。

这让我相信，我一开始不能显示信息的原因是我的状态没有及时更新。

编辑:根据要求编写完整的组件代码；

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

    async componentDidMount() {
        const { id } = this.props.match.params
        const soccerApi = axios.create({
          baseURL: 'https://soccer.sportmonks.com/api/v2.0',
          params: { api_token: API }
        });
        const leagueResponse = await soccerApi.get(`leagues/${id}`)
        const standingsResponse = await soccerApi.get(`standings/season/${leagueResponse.data.data.current_season_id}`)

        const leagueInfo = {
            leagueName: leagueResponse.data.data.name,
            leagueLogo: leagueResponse.data.data.logo_path,
            standings: standingsResponse.data.data[0].standings.data
        }
        this.setState({
            data: [...this.state.data, leagueInfo]
        })
    }


    render() { 
        return ( 
            <div>
                <h1>League Page</h1>
                <p>{this.state.data[0].leagueName}</p>

                <table className="table-auto">
                    <thead>
                        <tr>
                            <th className="p-2">Position</th>
                            <th className="p-2">Club</th>
                            <th className="p-2">Played</th>
                            <th className="p-2">Won</th>
                            <th className="p-2">Drawn</th>
                            <th className="p-2">Lost</th>
                            <th className="p-2">GF</th>
                            <th className="p-2">GA</th>
                            <th className="p-2">GD</th>
                            <th className="p-2">Points</th>
                            <th className="p-2">Form</th>
                        </tr>
                    </thead>
                    <tbody>
                        {this.state.data[0].standings.map(club => (
                        <tr>
                            <th className="p-2">{club.position}</th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                            <th></th>
                        </tr>
                        ))}
                    </tbody>
                </table>
            </div>
         );
    }
}

export default League;

Answer 1

它看起来不像是您曾经在UI中映射过您的数据，所以是一个简化的组件。

状态中的

• 初始数据为空
• 不更新状态为呈现页面如果数据存在

League.jsx

class League extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
    };
  }

  async componentDidMount() {
    const { id } = this.props.match.params;
    const soccerApi = axios.create({
      baseURL: "https://soccer.sportmonks.com/api/v2.0",
      params: { api_token: API }
    });
    const leagueResponse = await soccerApi.get(`leagues/${id}`);
    const standingsResponse = await soccerApi.get(
      `standings/season/${leagueResponse.data.data.current_season_id}`
    );

    const leagueInfo = {
      leagueName: leagueResponse.data.data.name,
      leagueLogo: leagueResponse.data.data.logo_path,
      standings: standingsResponse.data.data[0].standings.data
    };
    this.setState({
      data: leagueInfo,
    });
  }

  render() {
    const { data } = this.state;
    return data ? (
      <div>
        <h1>League Page</h1>
        <p>{data.leagueName}</p>

        <table className="table-auto">
          <thead>
            <tr>
              <th className="p-2">Position</th>
              <th className="p-2">Club</th>
              <th className="p-2">Played</th>
              <th className="p-2">Won</th>
              <th className="p-2">Drawn</th>
              <th className="p-2">Lost</th>
              <th className="p-2">GF</th>
              <th className="p-2">GA</th>
              <th className="p-2">GD</th>
              <th className="p-2">Points</th>
              <th className="p-2">Form</th>
            </tr>
          </thead>
          <tbody>
            {data.standings.map(club => (
              <tr>
                <th className="p-2">{club.position}</th>
                <th />
                <th />
                <th />
                <th />
                <th />
                <th />
                <th />
                <th />
                <th />
                <th />
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    ) : null;
  }
}

export default League;

如果您想呈现一些UI，那么您也可以有条件地呈现页面的特定部分。