如何在 javascript 中使用来自其他常量的变量？

Question

我正在构建一个获取用户位置并将纬度和经度存储在变量中的应用程序。我使用这些变量来获取用户的县 state/province 和使用 google API 的国家/地区。我把它放在 index.ts 文件中，这样我就可以在其他文件中使用这些 consts。我正在使用 useState 将值存储到变量。

首先，我想询问用户他们的位置。基于此，它应该使用 stateName、countryName 和 countyName 在单独的文件中显示卡片上的内容。我怎样才能用这个项目结构做到这一点？我如何在这些卡片文件中使用这些变量？

index.ts

export const getLocation = () => {  
  

  var [stateName, setstateName] = useState(String);
  var [countyName, setCountyName] = useState(null);
  var [countryName, setCountryName] = useState(null);
  var [stateNameshort, setstateNameshort] = useState(String);
  var [countryNameshort, setCountryNameshort] = useState(String);



  const [latitude, setlatitude] = useState(Number);
  const [longitude, setlongitude] = useState(Number);

  const [location, setLocation] = useState(Object);
  const [errorMsg, setErrorMsg] = useState(String);
    
  useEffect(() => {
        (async () => {
          if (Platform.OS === "android" && !Constants.isDevice) {
            setErrorMsg(
              "Oops, this will not work on Snack in an Android emulator. Try it on your device!"
            );
            return;
          }
          let { status } = await Location.requestPermissionsAsync();
          if (status !== "granted") {
            setErrorMsg("Permission to access location was denied");
            return;
          }
    
          let location = await Location.getCurrentPositionAsync({});
          setLocation(location);
    
          const latitude = location.coords.latitude;
          setlatitude(latitude);
          const longitude = location.coords.longitude;
          setlongitude(longitude);
        })();
      }, []);
    
      let text = "Waiting..";
      if (errorMsg) {
        text = errorMsg;
      } else if (location) {
        text = JSON.stringify(location);
      }
    


  

  useEffect(() => {
    fetchLocationData();
    return () => {};
  }, []);

  const fetchLocationData = () => {
    async () => {
      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;
          setstateName(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;
          setCountyName(resCounty);
          const resCountry = responseJson.results[0].address_components.filter(
            (x: any) => x.types.filter((t: Object) => t == "country").length > 0
          )[0].long_name;
          setCountryName(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);
        });
    };
  };
}

例如，我想使用 countryName 并将其显示在 Text 组件中。我该怎么做？

CountryCard.tsx

const CountriesCard = () => {
 return (
    <RectButton >
      <Text>{//countryName??}</Text>
    </RectButton>
  );
};

CountyCard.tsx

const CountiesCard = () => {
 return (
    <RectButton >
      <Text>{//countyName??}</Text>
    </RectButton>
  );
};

StateCard.tsx

const StateCard = () => {
 return (
    <RectButton >
      <Text>{//stateName??}</Text>
    </RectButton>
  );
};

Answer 1

您需要 return 您想要访问的所有值。首先，将 getLocation 重命名为 useLocation 并将代码移动到单独的文件中，如 use-location.ts，然后在该钩子的末尾添加一条 return 语句，如 return { countryName, countyName, stateName }; .从父组件调用 useLocation（将呈现 CountriesCard、CountiesCard、StateCard 等）。并向他们传递所需的值。

const ParentComponent = () => {
    const { countryName, countyName, stateName } = useLocation();

    return (
        <>
            <CountriesCard countryName={countryName} />
            <CountiesCard countyName={countyName} />
            <StateCard stateName ={stateName } />
        </>
    );

}

并且在您的子组件中访问值作为道具。示例：

const CountriesCard = (props) => {
    return (
        <RectButton >
            <Text>{props.countryName}</Text>
        </RectButton>
    );
}

如何在 javascript 中使用来自其他常量的变量？

How to use variables from other consts in javascript?

scope

constants

typescript

react-native

react-hooks