React不会循环渲染中的状态

Question

我对React很陌生，遇到了一个问题。 我需要从API收集数据，然后使用该数据通过Google Maps创建面。 但是，我在访问它时遇到了问题。

当我登录this.state.coordinates时：

console.log this.state.coordinates的结果

但是，当我尝试记录this.state.coordinates [0]时，它显示为未定义。 我的猜测是数据绑定的顺序是错误的，但是我似乎找不到解决方案。 这是我的代码：

 constructor(props) { super(props); this.state = { coordinates: [{}], loading: 'initial' }; } componentDidMount() { this.setState({ loading: 'true' }) this.getData() } getData = async () => { let coordinates = [] let res = await axios.get('https://smartcity-parking-api.herokuapp.com/sectors') const sectors = await res.data.data sectors.map(async (sector, i) => { let res = await axios.get(sector.self_links.detail) const coordinateArray = await res.data.data.coordinates coordinates[i] = { latlng: [], id: res.data.data.sector_data.sector_id } coordinateArray.map(coordinate => { let latlng = { lat: coordinate.latitude, lng: coordinate.longitude } coordinates[i].latlng.push(latlng) }) coordinates[i].latlng.push({ lat: coordinateArray[0].latitude, lng: coordinateArray[0].longitude }) }) this.setState({ coordinates: coordinates, loading: 'false' }) } render() { let { coordinates, loading } = this.state if (loading === 'initial') { return <h2>Intializing...</h2>; } if (loading === 'true') { return <h2>Loading...</h2>; } if (loading === 'false') { return ( //Google maps here ); } 

我尝试过制作装载机，但似乎没有用。 任何帮助将不胜感激！

Answer 1

为什么不先在构造函数中将坐标设置为null ，然后将条件

(loading === 'false' && coordinates)

那可以解决您的问题。

Answer 2

将getData函数更改为此。

getData = async () => {
    let coordinates = []
    let res = await axios.get('https://smartcity-parking-api.herokuapp.com/sectors')
    const sectors = res.data.data

    const sectorsLinks = await Promise.all(sectors.map(sector => axios.get(sector.self_links.detail)))

    sectorsLinks.map((sector, i) => {
        const coordinateArray = sector.data.data.coordinates;
        coordinates[i] = {
            latlng: [],
            id: sector.data.data.sector_data.sector_id
        }
        coordinateArray.map(coordinate => {
            let latlng = {
                lat: coordinate.latitude,
                lng: coordinate.longitude
            }
            coordinates[i].latlng.push(latlng)
        })

        coordinates[i].latlng.push({
            lat: coordinateArray[0].latitude,
            lng: coordinateArray[0].longitude
        })
    });
    console.log(coordinates);
    this.setState({
        coordinates: coordinates,
        loading: 'false'
    })
};