javascript - This.state 属性被认为是 "undefined"

Question

我正在从我的后端获取数据到我的前端。在我调用之后让 data = response.json()，然后调用 const bartData = Object.entries(data)。因此，我正在创建一个数组来保存我的原始对象的键/值对。然后我设置我的组件的状态 this.setState({allStations: bartData})，其中属性 allStations: []。这就是问题出现的地方 - 我想要视觉确认我正在获取正确的数据并按照我想要的方式操作它所以我调用 console.log(this.state.allStations[0]) 它给了我正确的内容，但是当我进一步 console.log(this.state.allStations[0][0] 时，我收到一个错误，指出

this.state.allStations[0] is undefined

为什么？另外，我知道我将一个数组放在一个数组中，这就是为什么我很惊讶 console.log(this.state.allStations[0]) 给我原始内容的原因大批。 console.log(this.state.allStations)图片 this.state.allStations

constructor(){
    super(props);
    this.state = {
       allStations: []
    }
}

 async getAllStations(){
        try{
            const response = await fetch(`/base-station-routes`);
            let data = await response.json();     

            // console.log(response);
            // let test = JSON.parse(bartData);
            // console.log(test)

            const bartData = Object.entries(data);

            // console.log(bartData[0][0]) works
            this.setState({
                allStations: bartData
            })
        }catch(e){
            console.log(`Error: ${e}`)
        }

}

render(){
    console.log(this.state.allStations[0]);
    return( more stuff )
}


  [1]: /image/hQFeo.png

Answer 1

在 console.log(this.state.allStations[0]) 之前的渲染函数中，您应该检查状态值。渲染函数在从后端获取数据之前执行，我的建议是这样做

if(this.state.allStations) && console.log(this.state.allStations[0])