useEffect 在返回函数之前没有运行

Question

我已检索到用户的位置，我想显示有关用户所在县、州/省和国家/地区的信息。我使用 Google Maps API 检索县、州和国家，并将它们存储为变量。但是，当我启动我的 expo 应用程序时，不会加载此数据。我必须保存我的项目，然后运行所有内容。然后，出现位置名称。我怎样才能让它在应用程序运行时显示位置，而不是每次都保存项目？我是否正确使用了useEffect？

  const [statedata, setstateData] = useState(null);
  var [countydata, setcountydata] = useState(null);
  const [countrydata, setcountrydata] = useState(null);
  var [stateNameshort, setstateNameshort] = useState(String);
  var [countryNameshort, setCountryNameshort] = useState(String);

  useEffect(() => {
    fetch(
      "https://maps.googleapis.com/maps/api/geocode/json?address=" +
        latitude +
        "," +
        longitude +
        "&key=" +
        apiKey
    )
      .then((response) => response.json())
      .then((responseJson) => {
        const resState = responseJson.results[0].address_components.filter(
          (x: any) =>
            x.types.filter((t: Object) => t == "administrative_area_level_1")
              .length > 0
        )[0].long_name;
        setstateData(resState);
        const resCounty = responseJson.results[0].address_components.filter(
          (x: any) =>
            x.types.filter((t: Object) => t == "administrative_area_level_2")
              .length > 0
        )[0].long_name;
        setcountydata(resCounty);
        const resCountry = responseJson.results[0].address_components.filter(
          (x: any) => x.types.filter((t: Object) => t == "country").length > 0
        )[0].long_name;
        setcountrydata(resCountry);
        const resStateShort = responseJson.results[0].address_components.filter(
          (x: any) =>
            x.types.filter((t: Object) => t == "administrative_area_level_1")
              .length > 0
        )[0].short_name;
        setstateNameshort(resStateShort);
        const resCountryShort = responseJson.results[0].address_components.filter(
          (x: any) => x.types.filter((t: Object) => t == "country").length > 0
        )[0].short_name;
        setCountryNameshort(resCountryShort);
        if (countryNameshort === "US") {
          countryNameshort = "US" + "A";
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

Answer 1

像这样实现它

useEffect(() => {
  const unsubscribe = navigation.addListener("focus", () => {
    GetLocation() // Gets fired whenever this screen is in focus
  });

  return unsubscribe;
}, [navigation]);

const GetLocation = async () => { // Gets Location
  fetch(
    "https://maps.googleapis.com/maps/api/geocode/json?address=" +
      latitude +
      "," +
      longitude +
      "&key=" +
      apiKey
  )
    .then((response) => response.json())
    .then((responseJson) => {
      const resState = responseJson.results[0].address_components.filter(
        (x: any) =>
          x.types.filter((t: Object) => t == "administrative_area_level_1")
            .length > 0
      )[0].long_name;
      setstateData(resState);
      const resCounty = responseJson.results[0].address_components.filter(
        (x: any) =>
          x.types.filter((t: Object) => t == "administrative_area_level_2")
            .length > 0
      )[0].long_name;
      setcountydata(resCounty);
      const resCountry = responseJson.results[0].address_components.filter(
        (x: any) => x.types.filter((t: Object) => t == "country").length > 0
      )[0].long_name;
      setcountrydata(resCountry);
      const resStateShort = responseJson.results[0].address_components.filter(
        (x: any) =>
          x.types.filter((t: Object) => t == "administrative_area_level_1")
            .length > 0
      )[0].short_name;
      setstateNameshort(resStateShort);
      const resCountryShort = responseJson.results[0].address_components.filter(
        (x: any) => x.types.filter((t: Object) => t == "country").length > 0
      )[0].short_name;
      setCountryNameshort(resCountryShort);
      if (countryNameshort === "US") {
        countryNameshort = "US" + "A";
      }
    })
    .catch((err) => {
      console.log(err);
    });
};

另外我更喜欢将我的fetch 操作写成async/await。不过你想写哪一个就看你自己了

async/await 类型

const GetLocation = async () => {
  const response = await fetch(
    "https://maps.googleapis.com/maps/api/geocode/json?address=" +
      latitude +
      "," +
      longitude +
      "&key=" +
      apiKey
  );

  const result = await response.json();
  
  const resState = responseJson.results[0].address_components.filter(
    (x: any) =>
      x.types.filter((t: Object) => t == "administrative_area_level_1").length >
      0
  )[0].long_name;
  setstateData(resState);
  const resCounty = responseJson.results[0].address_components.filter(
    (x: any) =>
      x.types.filter((t: Object) => t == "administrative_area_level_2").length >
      0
  )[0].long_name;
  setcountydata(resCounty);
  const resCountry = responseJson.results[0].address_components.filter(
    (x: any) => x.types.filter((t: Object) => t == "country").length > 0
  )[0].long_name;
  setcountrydata(resCountry);
  const resStateShort = responseJson.results[0].address_components.filter(
    (x: any) =>
      x.types.filter((t: Object) => t == "administrative_area_level_1").length >
      0
  )[0].short_name;
  setstateNameshort(resStateShort);
  const resCountryShort = responseJson.results[0].address_components.filter(
    (x: any) => x.types.filter((t: Object) => t == "country").length > 0
  )[0].short_name;
  setCountryNameshort(resCountryShort);
  if (countryNameshort === "US") {
    countryNameshort = "US" + "A";
  }
};