我是一个React JS的新手，我遵循下面的教程（应用程序1）：https://www.youtube.com/watch?v=GDa8kZLNhJ4&list=PL6QREj8te1P6wX9m5KnicnDVEucbOPsqR&index=10
尤其是从时间戳56：37开始。
我有两个文件，App.js和Map.js
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});
        }}
        //onChildClick={""}
      >

      </GoogleMapReact>
    </div>
  );
};

export default Map;

我最初设定的坐标是：
const coordinates = {lat: 0, lng: 0}
当我这样做的时候，我正在把我的谷歌Map组件渲染在网络应用程序上，它以lat为中心：0和lng：0。
然后我按照教程进行了更改，直到59：58。执行此操作后，将不会呈现贴图组件。我做了一些控制台日志，发现'setCoordinates'函数不工作，'coordinates'是空的。