将对象推送到无法使用Javascript的数组反应

Question

I'm trying to build some react app, and in that app Im pushing some objects to an array, then setting this arrray as a react component state. The problem is that's not working, this is my code -

var busArray = []
        if(apiResponse.length > 0)
        {
            for(var i in apiResponse) {
                if("ns3:VehicleLocation" in apiResponse[i]["ns3:MonitoredVehicleJourney"][0]) {
                    var busInfoObject = {"lineNo": apiResponse[i]["ns3:MonitoredVehicleJourney"][0]["ns3:PublishedLineName"][0],
                                                "operatorCode": apiResponse[i]["ns3:MonitoredVehicleJourney"][0]["ns3:OperatorRef"][0],
                                                "lat": apiResponse[i]["ns3:MonitoredVehicleJourney"][0]["ns3:VehicleLocation"][0]["ns3:Latitude"][0],
                                                "lng": apiResponse[i]["ns3:MonitoredVehicleJourney"][0]["ns3:VehicleLocation"][0]["ns3:Longitude"][0]
                                        }
                    busArray.push(busInfoObject)
                }
            }
        }
        else {
            console.log("No busses nearby detected")
        }
        console.log(busArray)
        this.setState({busRealTimeInfo: busArray}, ()=> console.log(this.state.busRealTimeInfo))

as you see I try to write the final array to the console to see the result, and I see this strange array that has a length but empty inside -

does anyone know what is this? and why it is happening?

UPDATE I tried to change the console.log(busArray) to console.log(busArray[0]) and it actually printed the real inforamtion, but still can't push the array into the state and the whole array printed to the console as empty..

somebody ever saw that kind of problem?

Answer 1

Based on the fiddle, it looks like you are accidentally resetting the array in the shouldComponentUpdate check.

 shouldComponentUpdate(nextProps, nextState) {
        if (nextState.busRealTimeInfo.length = 0 ...

Should be

shouldComponentUpdate(nextProps, nextState) {
            if (nextState.busRealTimeInfo.length === 0 ...