Javascript 地图未定义，I'；我不确定它是否'；是属性还是我的api设置

在实现GoogleMapsAPI时，我一直遇到以下错误。我一直在关注youtube教程，并根据自己的代码对其进行了调整。两个主要问题是：第一，映射属性未定义。第二个问题是我不确定我的GoogleAPI 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) => (

• 查看您的

  getMap

  及其实现方式。它不返回任何内容，它希望接收回调处理程序以接收

  响应.data

  。传递回调是一个可行的实现选项。相反，您可以返回

  response.data

  ，但这是另一个讨论主题

• 您的gmap是一个异步调用，应该在react生命周期（最好是在装载时）调用，并正确设置状态。如果您使用的是钩子，

  useffect

  应该可以做到这一点。（您需要将空数组作为第二个参数传递，以便仅在装载时运行）

• 因为它在第一次渲染时是一个异步调用

  mapData。结果

  不存在，所以您可以使用

  &&

  ，它充当一个短路，避免在第一部分计算为false时执行第二部分

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

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

函数映射（）{
常量[selectedSpeech，setSelectedSpeech]=useState（null）；
常量[mapData，setSMapData]=useState（null）；
useffect（（）=>{
//将使用结果调用SetMapData.data更新mapData
getMap（SetMapData）
}), [])
返回(
{mapData&&mapData.results.map（（语音）=>(
{
设置所选语音（语音）；
}}
/>
))}
//代码的其余部分

do

const-mapData=getMap（）；console.log（mapData）

并检查您实际得到的结果，因为它不包含具有

结果的对象

属性运行应用程序时，我可以进入该屏幕的唯一方法是删除地图部分。当我这样做时，我在控制台中看不到任何加载内容。我尝试放置const mapData=//url，但仍然没有任何内容。我处于一种状态现在丢失。谢谢你。虽然我的数据出现了一些问题，但实际上没有被提取，它没有崩溃，我只是得到了一张默认中心的地图。我感谢你的帮助。

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

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