使用导航5响应本机UseEffect提取数据

Question

我正在努力使用React useEffect从任何地方获取数据。

import React, { useState, useEffect } from "react";
import { View, Text, Button, FlatList } from "react-native";
import { GOOGLE } from "../GooglePlacesKeys";
import { useFocusEffect } from "@react-navigation/native";
/**
   * 
    "latitude": 37.324746,
    "longitude": -122.02160463,
  },
   */
export default PlacesScreen = ({ navigation }) => {
  const [places, setPlaces] = useState([]);
  const [loaded, setLoaded] = useState(false);
  useFocusEffect(
    React.useCallback(() => {
      fetchNearbyPlaces();
      if (!loaded) {
        fetchNearbyPlaces();
        setLoaded(false);
      }
      console.log("Places On Mounting", places);

      return () => {
        setLoaded(false);
      };
    }, [loaded])
  );

  //   console.log(places);
  const fetchNearbyPlaces = async () => {
    const latitude = 37.324746;
    const longitude = -122.02160463;
    let radius = 5 * 1000;

    const url = `https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${latitude},${longitude}&radius=${radius}&type=restaurant&key=${GOOGLE.API_KEY}`;

    await fetch(url)
      .then((res) => {
        return res.json();
      })
      .then(({ results }) => {
        let arrPlaces = [];
        for (let googlePlace of results) {
          let place = {};
          let myLat = googlePlace.geometry.location.lat;
          let myLong = googlePlace.geometry.location.lng;
          let coordinate = {
            latitude: myLat,
            longitude: myLong,
          };
          place["placeTypes"] = googlePlace.types;
          place["coordinate"] = coordinate;
          place["placeId"] = googlePlace.place_id;
          place["placeName"] = googlePlace.name;
          place["vicinity"] = googlePlace.vicinity;
          place["icon"] = googlePlace.icon;
          arrPlaces.push(place);
        }
        setPlaces(arrPlaces);
        setLoaded(true);
      });
  };
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>PlacesScreen</Text>
      <Button
        title="Home"
        onPress={() => {
          navigation.navigate("HomeScreen");
        }}
      />
    </View>
  );
};

所以我正在使用React导航5，这就是为什么我每次导航到“位置”屏幕时都使用useFocusEffect来获取数据的原因。但是问题是当我执行上面的代码时，我遇到了无限循环，但是当我执行此代码时，

import React, { useState, useEffect } from "react";
import { View, Text, Button, FlatList } from "react-native";
import { GOOGLE } from "../GooglePlacesKeys";
import { useFocusEffect } from "@react-navigation/native";
/**
   * 
    "latitude": 37.324746,
    "longitude": -122.02160463,
  },
   */
export default PlacesScreen = ({ navigation }) => {
  const [places, setPlaces] = useState([]);
//   const [loaded, setLoaded] = useState(false);
  useFocusEffect(
    React.useCallback(() => {
      fetchNearbyPlaces();
      console.log("Places On Mounting", places);
      return () => {
        // I did here
        setPlaces([]);
        // also I tried to not do any thing.
      };
    }, [])
  );

  //   console.log(places);
  const fetchNearbyPlaces = async () => {
    const latitude = 37.324746;
    const longitude = -122.02160463;
    let radius = 5 * 1000;

    const url = `https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${latitude},${longitude}&radius=${radius}&type=restaurant&key=${GOOGLE.API_KEY}`;

    await fetch(url)
      .then((res) => {
        return res.json();
      })
      .then(({ results }) => {
        let arrPlaces = [];
        for (let googlePlace of results) {
          let place = {};
          let myLat = googlePlace.geometry.location.lat;
          let myLong = googlePlace.geometry.location.lng;
          let coordinate = {
            latitude: myLat,
            longitude: myLong,
          };
          place["placeTypes"] = googlePlace.types;
          place["coordinate"] = coordinate;
          place["placeId"] = googlePlace.place_id;
          place["placeName"] = googlePlace.name;
          place["vicinity"] = googlePlace.vicinity;
          place["icon"] = googlePlace.icon;
          arrPlaces.push(place);
        }
        setPlaces(arrPlaces);
        // setLoaded(true);
      });
  };
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>PlacesScreen</Text>
      <Button
        title="Home"
        onPress={() => {
          navigation.navigate("HomeScreen");
        }}
      />
    </View>
  );
};

我的日志是

Places On Mounting Array []

谢谢。