为什么我的useState返回空值

Question

我正在进行一个制作旅游指南的教程项目。我将使用旅行顾问 API 来获取我们去的地图上任何地方的所有餐厅、酒店和景点的数据。与此相关的是，我还使用 Google Maps API 来渲染地图并更改经度和纬度，并随着用户在地图上不断移动而获得不同的餐厅和酒店。问题是我需要指定地图的边界，这是用来从地图动态获取经度和纬度的。我为边界创建一个状态，将其初始化为 null，将其作为 props 传递下来以从用户的地图中获取经度和纬度，然后将它们作为参数发送回与 API 通信的函数，以便 API 可以获取特定的餐厅、酒店和景点基于这些经度和纬度参数，问题是边界不断返回为空。我已经找了几个小时了，但找不到任何错误。我该如何解决它？

这是我的代码：

Index.js：

 import axios from 'axios'

 const URL = 'https://travel-advisor.p.rapidapi.com/restaurants/list-in-boundary'

 export const getPlacesData = async (sw, ne) => {
     try{
         const {data:{data}} = await axios.get(URL, 
                 {params: {
                     bl_latitude: sw.lat,
                     tr_latitude: ne.lat,
                     bl_longitude: sw.lng,
                     tr_longitude: ne.lng,
                 },
                 headers: {
                     'X-RapidAPI-Key': 'a-string-of-random-numbers',
                     'X-RapidAPI-Host': 'travel-advisor.p.rapidapi.com'
                 }}
             )
         return data
     }catch(error){
         console.log(error)
     }
 }

App.js：

 import {React, useState, useEffect} from 'react'

 import {CssBaseline, Grid} from '@material-ui/core'

 import Header from './components/Header/Header'
 import List from './components/List/List'
 import Map from './components/Map/Map'
 import { getPlacesData } from './api'

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

     useEffect(()=>{
         navigator.geolocation.getCurrentPosition(({coords: {latitude, longitude}})=>{
             setCoordinates({lat: latitude, lng: longitude})
         })
     },[])

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

     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 
                         coordinates={coordinates}
                         setCoordinates={setCoordinates}
                         setBounds={setBounds}
                     />
                 </Grid>
             </Grid>
         </>
     )
 }
 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/Rating';

 import useStyles from './style'

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

     return(
         <div className = {classes.mapContainer}>
             <GoogleMapReact
                 bootstrapURLKeys={{key: 'string-of-some-random-letters'}}
                 defaultCenter = {coordinates}
                 center={coordinates}
                 defaultZoom={14}
                 margin={[50, 50, 50, 50]}
                 options={''}
                 onChange={(e) => {
                     setCoordinates({lat: e.center.lat, lng: e.center.lng})
                     setBounds({ne: e.marginBounds.ne, sw: e.marginBounds.sw})
                 }}
                 onChildClick={''}
             >

             </GoogleMapReact>
         </div>
     )
 }
 export default Map

这就是它不断出现的确切错误：

未捕获的类型错误：无法读取 null 的属性（读取“sw”）

PS。我知道我的解释可能会让那些没有使用过地图 API 的人感到困惑，但如果我得到回复，我将非常感激。

Answer 1

     useEffect(()=>{
    {if(bounds){
      const { sw, ne } = bounds;
      getPlacesData(sw, ne).
      then((data)=>{
  
       console.log(data);
        setPlaces(data);
  
      })
    }
  else{
    getPlacesData().
    then((data)=>{

     console.log(data);
      setPlaces(data);

    })
  }
  
  }

   
  },[coordinates,bounds])