Question

我试图通过坐标数组进行映射，并将标记放置在Google Maps中的每个坐标上，但出现此错误：

对象作为React子对象无效（找到：[object Promise]）。如果要渲染子级集合，请改用数组。

因此它返回一个Promises数组。我不确定如何制作它，以使其返回实际值。

有人有什么想法吗？

代码如下：

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)

Answer 1

问题是坐标是一个Promises数组。在下面的语句中：

const convert = Geocode.fromAddress(coordinate.location)then(...)

您只需创建一个承诺对象convert并返回map。您可以使用Promise.all获取实际值并将结果放入状态。第一次更改构造函数：

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

这应该有效。

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

1 个答案: