无法读取 ComponentDidMount 中 null / API 调用的属性

Question

我正在尝试映射一个对象数组(它来自一个 API 调用，然后我将其设置为反应组件中的状态，这一切都在ComponentDidMount()内完成(，然后使用映射的输出作为props传递给另一个组件，然后该组件将在我的 Google 地图上设置标记。

我假设 map 函数在 API 调用有时间完成之前正在执行，但我不是 100% 确定如何解决它。

async componentDidMount(){
let appKey = '';
let id = '';
const url = `https://api.tfl.gov.uk/BikePoint/app_key=${appKey}&app_id=${id}`;
await axios.get(url)
.then((response) => {
const data = response.data;
let bikePointsInfo = data.map((d) => {
return {
name: d.commonName,
lat: d.lat,
lon: d.lon,
bikes: Number((Object.entries(d.additionalProperties[6])[4])[1]),
spaces: Number((Object.entries(d.additionalProperties[7])[4])[1])
};
});
this.setState({bikePointsInfo});
})
}
render () {
const markers = this.state.bikePointsInfo.map(marker => (
<MapPoint
name = {this.state.bikePointsInfo.name}
bikes = {marker.bikes}
spaces = {marker.spaces}
lon = {marker.lon}
lng = {marker.lng}
/>
))
return (
<div>
<Map
google={this.props.google}
zoom={14}
initialCenter={{lat: 51.5080, lng: -0.1281}}
>
{markers}
</Map>
</div>
);
}

类型错误： 无法读取 null 的属性"bikePointsInfo">

Answer 1

我认为你可以做这样的事情：

async componentDidMount() {
let appKey = '';
let id = '';
const url = `https://api.tfl.gov.uk/BikePoint/app_key=${appKey}&app_id=${id}`;
await axios.get(url)
.then((response) => {
const data = response.data;
let bikePointsInfo = data.map((d) => {
return {
name: d.commonName,
lat: d.lat,
lon: d.lon,
bikes: Number((Object.entries(d.additionalProperties[6])[4])[1]),
spaces: Number((Object.entries(d.additionalProperties[7])[4])[1])
};
});
this.setState({
bikePointsInfo
});
})
}
updated() {
this.renderComponent()
}
renderComponent() {
if (this.state.bikePointsInfo) {
const markers = this.state.bikePointsInfo.map(marker => ( <
MapPoint name = {
this.state.bikePointsInfo.name
}
bikes = {
marker.bikes
}
spaces = {
marker.spaces
}
lon = {
marker.lon
}
lng = {
marker.lng
}
/>
))
return ( 
<div >
<Map google = {
this.props.google
}
zoom = {
14
}
initialCenter = {
{
lat: 51.5080,
lng: -0.1281
}
} 
>
{
markers
} 
</Map> 
</div>
);
}
return ( 
<div >
<Map google = {
this.props.google
}
zoom = {
14
}
initialCenter = {
{
lat: 51.5080,
lng: -0.1281
}
} >
</Map> 
</div>
);
}
render() {
return this.renderComponent()
}

---

}