地图未定义，我不确定它是属性还是我的 api 设置

Question

在实现 google maps api 时，我不断收到以下错误。我一直在关注 youtube 教程，并且一直在将其调整为我的代码。两个主要问题首先是地图属性未定义。第二个是我不确定我的 google api url 是否为 mapData 正确提取。任何帮助将不胜感激。

×
TypeError: Cannot read property 'map' of undefined
Map
C:/Users/Langley/Desktop/ArticCards/screens/MapScreen.js:18
  15 |  const [selectedSpeech, setSelectedSpeech] = useState(null);
  16 | 
  17 |  return(
> 18 |    <GoogleMap
     | ^  19 |      defaultZoom={10} defaultCenter={{lat: 42.807091, lng: -86.018860}}
  20 |    >
  21 |      {mapData.results.map((speech) => (

地图屏幕

import React, { useState, useEffect } from "react";
import {
    withGoogleMap,
    withScriptjs,
    GoogleMap,
    Marker,
    InfoWindow
  } from "react-google-maps";
import {getMap} from '../api/gmap';
import {gkey} from '../api/gkey'

const mapData = getMap();

function Map(){
  const [selectedSpeech, setSelectedSpeech] = useState(null);

  return(
    <GoogleMap
      defaultZoom={10} defaultCenter={{lat: 42.807091, lng: -86.018860}}
    >
      {mapData.results.map((speech) => (
        <Marker key={speech.place_id} position={{
          lat: speech.geometry.location.lat, 
          lng: speech.geometry.location.lng
        }}
        onPress={() => {
          setSelectedSpeech(speech);
        }}
        />
      ))}

      {selectedSpeech && (
        <InfoWindow position={{
          lat: selectedSpeech.geometry.location.lat, 
          lng: selectedSpeech.geometry.location.lng
        }}
        onCloseClick={() => {
          setSelectedSpeech(null);
        }}
        >
          <div> 
            <h2>
              {selectedSpeech.name}
            </h2>
            <h3>
              {selectedSpeech.rating}
            </h3>
            <p>
              {selectedSpeech.formatted_address}
            </p>
          </div> 
        </InfoWindow>
      )}
    </GoogleMap>
  );
}

const WrappedMap = withScriptjs(withGoogleMap(Map));

const MapScreen = () => {
  return(
    <div style={{width: '100vw', height: '100vh'}}>
      <WrappedMap googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=${gkey}`}
        loadingElement = {<div style={{height: "100%"}}/>}
        containerElement = {<div style={{height: "100%"}}/>}
        mapElement = {<div style={{height: "100%"}}/>}
      />
    </div>
  )
}

export default MapScreen;

gmap.js

import axios from 'axios'
import {gkey} from './gkey';

const gmapServer = axios.create({
    baseURL:'http://maps.googleapis.com/'

})


export const getMap = async (callback) => {
    const response = await gmapServer.get(
        `maps/api/place/textsearch/json?query=speech+pathologists&key=${gkey}`
    ); 
    callback(response.data)
};

Answer 1

• 看看你的getMap 以及它是如何实现的。它不返回任何东西，它期望接收一个回调处理程序来接收response.data。传递回调是一个可行的实现选项。相反，您可以返回response.data，但这是另一个讨论主题；

• 您的 gmap 是一个异步调用，应该在反应生命周期（最好在 Mount 上）调用并正确设置状态。鉴于您正在使用钩子，useEffect 应该可以解决问题。 （您需要将空数组作为第二个参数传递才能仅在挂载时运行）

• 因为它是一个异步调用，在第一次渲染时mapData.results 不存在，所以你可以使用&&，它起到一个短路的作用，如果第一部分被评估为假，则避免第二部分被执行。

鉴于您的代码可能更接近于：

function Map(){
  const [selectedSpeech, setSelectedSpeech] = useState(null);
  const [mapData, setSMapData] = useState(null);

  useEffect(() => {
    // setSMapData will be called with results.data updating mapData
    getMap(setSMapData)
  }), [])

  return(
    <GoogleMap
      defaultZoom={10} defaultCenter={{lat: 42.807091, lng: -86.018860}}
    >
      {mapData && mapData.results.map((speech) => (
        <Marker key={speech.place_id} position={{
          lat: speech.geometry.location.lat, 
          lng: speech.geometry.location.lng
        }}
        onPress={() => {
          setSelectedSpeech(speech);
        }}
        />
      ))}

      // rest of code