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

问题描述

我正在努力使用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,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},};
          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,justifyContent: "center" }}>
      <Text>PlacesScreen</Text>
      <Button
        title="Home"
        onPress={() => {
          navigation.navigate("HomeScreen");
        }}
      />
    </View>
  );
};

我的日志是

Places On Mounting Array []

谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）