Question

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

2018-06-23

480

javascript reactjs google-maps google-maps-api-3 es6-promise

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

对象作为 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

问题是 coordinates 是一个 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>
)

这应该有效。