Javascript 对象作为React子对象无效（找到：[object Promise]）Google Maps

我试图通过一个坐标数组进行映射，并在Google Maps中的每个坐标上放置一个标记，但我得到了以下错误：

对象作为React子对象无效（找到：[对象承诺]）。如果要呈现子对象集合，请改用数组

因此，它回报了一系列的承诺。我不知道如何使它返回实际值

有人有什么想法吗

代码如下：

import React, {Component} from "react";
import {Map, InfoWindow, Marker, GoogleApiWrapper} from "google-maps-react";
import Navbar from "./Navbar";
import {connect} from "react-redux";
import {getVacations} from "./redux";
import Geocode from "react-geocode";

class GoogleMaps extends Component {
    constructor(){
        super();

    }

       componentDidMount = () => {
           this.props.getVacations();
       }

       render() {
        console.log(this.props);

        const coordinates = this.props.vacations.map(coordinate => {
            const convert = Geocode.fromAddress(coordinate.location).then(response => {
                const lat = response.results[0].geometry.location.lat;
                const lng = response.results[0].geometry.location.lng;
                console.log(lat, lng);
                return <Marker key={coordinate._id} position={{lat: lat, lng: lng}} animation={2}/>
            })   
            console.log(convert);
            return convert;
         })


         return (
            <div>
                <Navbar/>
                <Map google={this.props.google} zoom={4}>
                    {coordinates}
                </Map>
            </div>
        )
       }
    }

    const connectVaca = connect(state => ({vacations: state}), {getVacations})(GoogleMaps);

export default GoogleApiWrapper({
    apiKey: "API KEY HERE"
})(connectVaca)

import React，{Component}来自“React”；
从“GoogleMaps react”导入{Map，InfoWindow，Marker，GoogleApiWrapper}；
从“/Navbar”导入导航栏；
从“react redux”导入{connect}；
从“/redux”导入{getVacations}；
从“react Geocode”导入地理编码；
类GoogleMaps扩展组件{
构造函数（）{
超级（）；
}
componentDidMount=（）=>{
这个.props.getVacations（）；
}
render（）{
console.log（this.props）；
const coordinates=this.props.vacations.map（坐标=>{
const convert=Geocode.fromAddress（坐标位置）。然后（响应=>{
const lat=response.results[0].geometry.location.lat；
const lng=响应。结果[0]。geometry.location.lng；
控制台日志（lat、lng）；
返回
})   
console.log（转换）；
返回转换；
})
返回(
{坐标}
)
}
}
const connectVaca=connect（state=>（{vacations:state}），{getVacations}）（谷歌地图）；
导出默认GoogleApprapper({
apiKey：“此处的API密钥”
})（连接VACA）

问题在于坐标是一系列承诺。在以下声明中：

const convert=Geocode.fromAddress（坐标.位置）然后（…）

您只需创建一个promise对象

convert

并在map中返回。您可以使用获取实际值并将结果放入状态。第一次更改构造函数：

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

获取所有承诺的价值：

const coordinates = this.props.vacations.map(coordinate => {
      const convert = Geocode.fromAddress(coordinate.location)
      return convert;
})

Promise.all(coordinates).then(values => {
  //Create your markers array here and put into state
  const markers = values.map(item => ... )
  this.setState({ coords: markers })
});

然后在返回的jsx对象中使用

this.state.coords

return (
    <div>
        <Navbar/>
        <Map google={this.props.google} zoom={4}>
            {this.state.coords}
        </Map>
    </div>
)

返回(
{this.state.coords}
)

---

这应该行得通。

好吧，这不管用，但我有95%的把握我做得不对。在

标记的内部

在

values.map中

我是否应该这样写：

const lat=response.results[0].geometry.location.lat；const lng=响应。结果[0]。geometry.location.lng；控制台日志（lat、lng）；return

我很确定我没有，但我就是这么做的@伊斯马伊尔尼夫塔利耶夫