Реакт не будет проходить через состояние в рендере

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

Измените функцию 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'
    })
};

Answer 2

Почему бы сначала не установить координаты null в конструкторе, а затем установить условное выражение

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

Это может решить вашу проблему.