javascript - 使用 Promise.all 在 Google map 上放置标记 - 对象作为 React 子对象无效(发现 : [object Promise])

Question

几天来我一直在尝试在 Google map 上的坐标上放置标记，但遇到了以下错误:

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

所以我发现我可以使用 Promise.all 来解决这个问题，但我在正确执行此操作时遇到了困难。我不完全确定我应该在组件中如何以及在何处执行此操作。

谁能帮帮我吗？

代码如下:

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();
    this.state = {
      coords: []
    }
  }

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

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

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

    Promise.all(coordinates).then(locations => {
      const markers = locations.map(place => {
        console.log(place);
        const lat = place.results[0].geometry.location.lat;
        const lng = place.results[0].geometry.location.lng;
        return [
          <Marker
            key={place._id}
            position={
              {
                lat: lat, 
                lng:lng
              }
            }
            animation={2}
          />
        ]
      })
      this.setState({
        coords: markers
      })
    })

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

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

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

这是我的 getVacations 操作和 reducer :

export const getVacations = () => {
    return dispatch => {
        axios.get("/vacations").then(response => {
            dispatch({
                type: "GET_VACATIONS",
                vacations: response.data
            })
        }).catch(err => {
            console.log(err);
        })
    }
}

const reducer = (state = [], action) => {
    switch(action.type){
        case "GET_VACATIONS":
            return action.vacations;
        default:
            return state;
    }
}

Answer 1

渲染方法中不应该有异步函数调用。异步调用的最佳位置是 componentDidMount根据 react 文档。

放置您的 Promise.all调用componentDidMount功能。每当您的组件安装时，都会执行此函数。然后，每当setState调用设置coords ，您的组件将使用更新后的 coords 重新渲染。值。

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();
    this.state = {
      coords: []
    }
  }

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

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

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

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

编辑:自 loadVacations是一个 thunk，你需要将它传递给 dispatch 。更改您的mapDispatchToProps函数传递给connect像这样:

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

Edit2: 这与 React 运行初始 render() 有关。页面加载后调用。然后，一旦安装了您的组件，componentDidMount被叫。在 componentDidMount ，您运行一个异步函数 getVacations 。因为您没有等待 getVacations 中的 API 调用最后，标记创建在尚未加载任何假期的情况下进行。每当您访问新选项卡并返回应用程序时，render上次 API 调用加载的假期再次发生，这就是它们出现的原因。

尝试从你的操作中返回一个 promise getVacations 。然后，每当您调用 getVacations在componentDidMount ，链一个then调用getVacations 。里面then是您应该放置坐标创建的位置 + Promise.all称呼。那么我相信你的代码会起作用。

export const getVacations = () => {
    return dispatch => {
        // returning axios.get will return a promise you can chain a then call on
        return axios.get("/vacations").then(response => {
            dispatch({
                type: "GET_VACATIONS",
                vacations: response.data
            })
        }).catch(err => {
            console.log(err);
        })
    }
}

然后在你的componentDidMount中功能:

componentDidMount = () => {
    this.props.getVacations().then(() => {
       // Place coordinates, your Promise.all call, and your setState call here 
    });
}