在调用render函数之前，是否等待将信息添加到我的状态

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，尽管使用页面上的按钮可以成功地console.log(this.state.data[0].leagueName)此信息
这让我相信，我最初无法显示信息的原因是我的状态没有及时更新。

编辑：根据要求提供完整的组件代码；

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中映射数据，所以它是一个简化的组件。

• 状态中的初始数据为null
• 不将状态更新为数组
• 如果存在数据，则有条件地呈现页面

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的某些，那么您也可以有条件地渲染页面的特定部分。