React中coordinates Props未填充问题排查求助

我正在学习React，跟随教程开发。App组件调用Travel Advisor API已成功获取数据，但Map组件的coordinates Props在onChange事件中未填充，相关代码如下：

App.js代码 #

import React, { useState, useEffect } from "react";
import { CssBaseline, Grid } from "@material-ui/core";
import { getPlacesData } from "./api";
import Header from "./components/Header/Header";
import List from "./components/List/List";
import Map from "./components/Map/Map";
import { PlaceSharp } from "@material-ui/icons";

const App = () => {
  const [places, setPlaces] = useState([]);
  const [coordinates, setCoordinates] = useState({});
  const [bounds, setBounds] = useState(null);

  useEffect(() => {
    getPlacesData().then((data) => {
    console.log(data) // data is there
      setPlaces(data);
    });
  }, []);

  return (
    <>
      <CssBaseline />
      <Header />
      <Grid container spacing={3} style={{ width: "100%" }}>
        <Grid item xs={12} md={4}>
          <List />
        </Grid>

        <Grid item xs={12} md={8}>
          <Map
            setCoordinates={setCoordinates}
            setBounds={setBounds}
            coordinates={coordinates}
          />
        </Grid>
      </Grid>
    </>
  );
};

export default App;

传递给Map组件的Props #

<Map
  setCoordinates={setCoordinates}
  setBounds={setBounds}
  coordinates={coordinates}
/>

Map组件代码 #

import React from 'react'
import GoogleMapReact from 'google-map-react'
import {Paper, Typography, useMediaQuery} from '@material-ui/core'
import  LocationOnOutlinedIcon  from '@material-ui/icons/LocationOnOutlined'
import Rating from "@material-ui/lab"

import useStyles from './styles'

const Map = ({setCoordinates, setBounds, coordinates}) => {

  const classes = useStyles()
  const isMobile = useMediaQuery('(min-width: 600px)')
  
  //console.log(coordinates)
  //const coordinates= {lat: 0, lng: 0}
  
  return (
    <div className={classes.mapContainer}>
        <GoogleMapReact
            bootstrapURLKeys={{ key: 'xxxxxxxxxxxxxxxxxxxx'}}
            defaultCenter ={coordinates}
            center = {coordinates}
            defaultZoom = {14}
            margin = {[50, 50, 50, 50]}
            options = {''}
            onChange = {(e) => {
              console.log(e) // this is empty but it should have data
              setCoordinates({lat: e.center.lat, lng: e.center.lng});
            
            }}
          
            onChildClick = {''}
        >

        </GoogleMapReact>
    </div>
  )
}

export default Map

API已成功返回餐厅数据（如图：），仅coordinates Props未填充，请求帮忙排查问题所在。

问题排查方案 #

1. 初始化coordinates有效默认值
   当前coordinates初始化为空对象{}，Google Map需要有效的lat和lng才能正常渲染并触发onChange事件。修改App.js中的初始化代码：

   const [coordinates, setCoordinates] = useState({ lat: 40.7128, lng: -74.0060 }); // 示例：纽约坐标
   

2. 修正GoogleMapReact的onChange参数结构
   google-map-react的onChange回调返回的参数包含center、zoom等属性，需调整参数解构方式：

   onChange = ({ center, zoom }) => {
     setCoordinates({ lat: center.lat, lng: center.lng });
     setBounds({ /* 根据需求设置bounds */ });
   }
   

3. 移除无效的options配置
   当前options = {''}为无效配置，改为空对象或有效配置：

   options={{
     disableDefaultUI: true,
     zoomControl: true
   }}
   

4. 验证Google Map API密钥有效性
   确保bootstrapURLKeys中的API密钥已启用Maps JavaScript API，否则地图无法加载，onChange事件不会触发。

5. 修复Rating导入错误
   Map组件中Rating导入路径错误，修正为：

   import Rating from "@material-ui/lab/Rating";
   

   该错误可能导致组件渲染失败，间接影响地图功能。

内容的提问来源于stack exchange，提问作者PinPiguin