ReactJS TypeError：_this3.state.Objects.map 不是函数答案

【问题标题】：ReactJS TypeError: _this3.state.Objects.map is not a functionReactJS TypeError：_this3.state.Objects.map 不是函数
【发布时间】：2018-05-13 22:57:22
【问题描述】：

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

TypeError: _this3.state.Objects.map 不是函数

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>
  ))


}

}

非常感谢！

【问题讨论】：

在 componentDidMount 中执行请求并在请求运行时显示某种加载 UI 更加 UI 友好。
好吧，你的res 不是一个数组。你在console.log(res) 中得到了什么？？
Res 可能是对象。请检查控制台输出。映射 res 应该是一个数组
我正在 console.log 上获取所有 API 数据

标签： javascript jquery reactjs google-maps typeerror

【解决方案1】：

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

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

您实际追求的data 位于object 中。请参阅下面的示例，了解如何提取所述数据。

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 了解更多信息。

【讨论】：