javascript - ReactJS TypeError : _this3. state.Objects.map 不是函数

Question

我正在向谷歌地图标记获取一些 api 数据...我是 ReactJS 的新手，过去 2 天我一遍又一遍地遇到相同的错误，我真的不知道如何解决它。有人可以在这里帮助我吗？(另外，这是我第一次在这里提出任何类型的问题，如果我做错了什么，抱歉)

TypeError: _this3.state.Objects.map is not a function

class maps extends Component{

    constructor(props){
        super(props)

        this.state = { Objects: [] }
    }

    componentWillMount(){

        axios.get('https://api.ost.pt/traffic_events/?key=VMSBvXtmOixXVuaHqeyAxDEhQkbnJpXZBYjDufEu')
        .then( res => {

            console.log(res);
            this.setState({Objects: res})

        })
        .catch(error => {
            console.log('Error fetching and parsing data', error); 
        });

    }

render(){

    const MyMapComponent = withScriptjs(withGoogleMap((props) =>

    <GoogleMap
      defaultZoom={2}
      defaultCenter={{ lat: 40.6333333, lng: -8.65 }}
    >
    {

  this.state.Objects.map(function(Objects, i) {
        return(
            <Marker position={{ lat: Objects.data.Objects.location.coodinates[i], lng: Objects.data.Objects.location.coodinates[i] }} />
        )
    })
    }

    {props.isMarkerShown && <Marker position={{ lat: 40.6333333, lng: -8.65 }} />}
      {props.isMarkerShown && <Marker position={{ lat: 40.627467, lng: -8.64912 }} />}
    </GoogleMap>
  ))


}

}

非常感谢!

Answer 1

Objects.map 不是函数，因为 Objects 不是数组。

在您的 componentWillMount() 函数中:axios.get() 请求返回的 res 变量是一个 object 包含额外信息，例如 headers 和 status text。

您实际需要的数据位于该对象内。请参阅下面的示例，了解如何提取所述数据。

axios.get('https://api.ost.pt/traffic_events/?key=VMSBvXtmOixXVuaHqeyAxDEhQkbnJpXZBYjDufEu').then((response) => {

    const { Objects } = response.data // Extract Objects From Data.
    return this.setState({ Objects }) // Update Component State.

}).catch((error) => console.log('Error fetching and parsing data', error))

请参阅Axios docs欲了解更多信息。