Question

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

当我登录this.state.coordinates时：

Console.log result of 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'
    })
};

React不会循环渲染中的状态

2 个答案: