ReactJS 编译失败：“对象”未定义 no-undef答案

【问题标题】：ReactJS Failed to compile: 'Objects' is not defined no-undefReactJS 编译失败：“对象”未定义 no-undef
【发布时间】：2017-11-30 20:24:00
【问题描述】：

有人可以帮我看看我的代码中缺少什么吗？我正在尝试这样做几个小时，然后一个又一个错误....

目标是将所有对象坐标提取到 GoogleMaps 标记中...

（reactJS 新手）

class maps extends Component{

    constructor(props){
        super(props)

        this.state = { Objects: [] }
    }

render(){

   {this.state.Objects.location.coordinates.map((item, i) => (
     <Marker position= {{ lat: Objects[i].location.coodinates[0], lng: Objects[i].location.coordinates[1] }}/>
    ))} 

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

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

    </GoogleMap>
  ))

    return(
        <div>
        <MyMapComponent
        isMarkerShown
        googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyCnQmNcHpzoytzm02Zf-inD6xxTdSRJdLg&v=3.exp&libraries=geometry,drawing,places"
        loadingElement={<div style={{ height: `100%` }} />}
        containerElement={<div style={{ height: `400px` }} />}
        mapElement={<div style={{ height: `100%` }} />}
        />
        </div>
    )
}

componentDidMount(){

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

                    const { Objects } = response.data
                    console.log(Objects)
                    this.setState({Objects}) 

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

            }

}

These are the objects.coordinates from api data that I need to fetch

任何提示将不胜感激。非常感谢！

【问题讨论】：

最初，Objects 是一个空数组。假设这将包含属性location 是不公平的。你想达到什么目的？
如果您是 react 新手，为什么要尝试构建它而不是某个版本的“hello world”？
组件第一次渲染iirc时，数据还在从axios加载，所以在尝试访问之前，需要添加一个检查来检查Objects是否充满了数据，像if (Objects.length) 这样通常就足够了。
@brandNew 打开这个请。 i.stack.imgur.com/1lfIX.png。我想实现到所有对象的位置和坐标以在地图上创建标记

标签： javascript reactjs google-maps

【解决方案1】：

这是错误的：

{this.state.Objects.location.coordinates.map((item, i) => (
    <Marker position= {{ lat: Objects[i].location.coodinates[0], lng: Objects[i].location.coordinates[1] }}/>
))}

因为您正在映射 this.state.Objects.location.coordinates，并且您正在使用索引来访问 Objects[i].location.coodinates[0] 和 Objects[ i].location.coordinates[1]，并且 Objects 没有在任何地方定义，但是 this.state.Objects 是。

我猜你的意思是这样的：

 {this.state.Objects.map((item, i) => (
        <Marker position= {{ lat: item.location.coodinates[0], lng: item.location.coordinates[1] }}/>
    ))}

以下是如何列出每个对象的经纬度的示例：http://jsfiddle.net/g4hr5jnc/

您只需将其替换为 Google 地图组件

【讨论】：

它还会打印一个错误：TypeError: item.location.coodinates is undefined
等等，你不能把那个代码放在“render”里面，就像它应该放在 return 里面一样，把你的 MyMapComponent 放在 render 外面。循环只是问题之一。
我刚刚用 JSFiddle 更新了我的答案，这样您至少可以看到纬度/经度，您必须使用谷歌地图组件更新 div 内容。

【解决方案2】：

我认为问题在于代码首先运行constructor(props)，然后是render()，然后是componentDidMount()。因此，当您运行 render() 时，this.state.Objects 仍然是一个空数组。
您可能想尝试：
1.将componentDidMount()中的任何内容写入constructor(props)
2.将componentDidMount()改为componentWillMount()

更多关于 React 组件生命周期的信息：
http://busypeoples.github.io/post/react-component-lifecycle/

【讨论】：