React项目中setCoordinates函数失效致地图组件无法渲染求助

我是React JS新手，跟着教程学习时遇到了问题：之前在Map.js里手动设置const coordinates = {lat: 0, lng: 0}时谷歌地图能正常渲染，但改成从App组件传参后，地图组件不再渲染，控制台显示coordinates值为空，setCoordinates函数也无法正常工作。

相关代码 #

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';

const App = () => {
    const [places, setPlaces] = useState([]);

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

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

    return (
        <React.Fragment>
        <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>
        </React.Fragment>
    )
}

export default App;

Map.js #

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 = ({coordinates, setCoordinates, setBounds}) => {
  console.log(coordinates)
  console.log(setCoordinates);
  const classes = useStyles();
  const isMobile = useMediaQuery("(min-width: 600px)");

  //const coordinates = {lat: 0, lng: 0}
  return (
    <div className={classes.mapContainer}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: "API KEY" }}
        defaultCenter={coordinates}
        center={coordinates}
        defaultZoom={14}
        margin={[50, 50, 50, 50]}
        options={{}}
        onChange={(e) => {
          console.log(e);
          setCoordinates({ lat: e.center.lat, lng: e.center.lng});
        }}
      >
      </GoogleMapReact>
    </div>
  );
};

export default Map;

核心问题是App组件中coordinates的初始状态是空对象，GoogleMapReact需要有效的lat和lng值才能确定地图中心，从而完成渲染。

解决步骤 #

1. 给App组件中的coordinates设置初始有效坐标：

// 替换原来的空对象初始值
const [coordinates, setCoordinates] = useState({ lat: 0, lng: 0 });

这样组件挂载时就能传递合法的坐标给Map组件，地图可以正常初始化渲染。

2. 可选优化：在Map组件中增加坐标有效性判断，避免潜在报错：

const Map = ({coordinates, setCoordinates, setBounds}) => {
  const classes = useStyles();
  const isMobile = useMediaQuery("(min-width: 600px)");

  // 坐标无效时显示加载提示
  if (!coordinates.lat || !coordinates.lng) {
    return <div>加载中...</div>;
  }

  return (
    <div className={classes.mapContainer}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: "API KEY" }}
        defaultCenter={coordinates}
        center={coordinates}
        defaultZoom={14}
        margin={[50, 50, 50, 50]}
        options={{}}
        onChange={(e) => {
          setCoordinates({ lat: e.center.lat, lng: e.center.lng});
        }}
      />
    </div>
  );
};

原理说明 #

当初始coordinates是空对象时，GoogleMapReact的defaultCenter和center属性无法获取到lat和lng，组件无法确定地图的初始位置，因此无法渲染。设置初始有效坐标后，组件能正常完成初始化，后续地图的onChange事件触发时，setCoordinates也能正常更新状态。

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