javascript - 对象作为 React 子对象无效(找到 : [object Promise]) Google Maps

Question

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

对象作为 React 子项无效(找到:[object Promise])。如果您打算呈现子项集合，请改用数组。

所以它返回一个 Promise 数组。我不确定如何让它返回实际值。

有人有什么想法吗？

代码如下:

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

问题是坐标是一个Promise数组。在下面的声明中:

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

您只需创建一个 promise 对象 convert 并在 map 中返回。您可以使用 Promise.all获取实际值并将结果放入状态。首先更改构造函数:

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

获取所有 promise 的值:

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

这应该有效。