使用异步反应功能组件或 if 语句

Question

I am developing an app and I need to display a currency based on geological location of the user. If that fails, I want to use the data from my function getCountryInfoByLanguage.

Basically what happens with this code is that it runs, but doesn't wait for the if statement to finish, uses the currency it got from the function, then the if statement finishes and prints the countryCode I want to use. What are my available options? I tried using async/await but I get " Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead."

import convertPrice from "./convertPrice";
import getCountryInfoByLanguage from "./getCountryInfoByLanguage";
import axios from "axios";
export default (language, price) => {
  const { countryCode, currency } = getCountryInfoByLanguage(language);
  let countryCode_;

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(position => {
      axios
        .get(
          `http://api.geonames.org/countryCodeJSON?lat=${
            position.coords.latitude
          }&lng=${position.coords.longitude}&username=...`
        )
        .then(response => {
          countryCode_ = response.data.countryCode;
          console.log(countryCode_);
        });
    });
  } else {
    countryCode_ = countryCode;
  }
  console.log(countryCode_);
  const convertedPrice = Math.round(convertPrice(price, currency) * 10) / 10;
  const formattedPrice = convertedPrice.toLocaleString(countryCode_, {
    style: "currency",
    currency: currency
  });
  console.log(formattedPrice);
  return formattedPrice;
};

Answer 1

Multiple ways to solve this. I have written a simple example using React Hooks. The same can be done in ES6 class component as well. The trick is to keep the React lifecycle functions themselves synchronous, but make asyc calls like below:

import React from "react";
import getCountryInfoByLanguage from "./getCountryInfoByLanguage";
import axios from "axios";

function Comp({ language }) {
  const [countryCode, setCountryCode] = React.useState(null);

  React.useEffect(() => {
    (async function() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(position => {
          axios
            .get(
              `http://api.geonames.org/countryCodeJSON?lat=${position.coords.latitude}&lng=${position.coords.longitude}&username=...`
            )
            .then(response => {
              setCountryCode(response.data.countryCode);
            });
        });
      } else {
        const countryInfo = getCountryInfoByLanguage(language);
        setCountryCode(countryInfo.countryCode);
      }
    })();
  }, []);

  return <div>Your country code : {countryCode}</div>;
}

Answer 2

you can change if {} else {} logic to try{} catch{} logic

try {
 navigator.geolocation.getCurrentPosition(position => {
      axios
        .get(
          `http://api.geonames.org/countryCodeJSON?lat=${
            position.coords.latitude
          }&lng=${position.coords.longitude}&username=...`
        )
        .then(response => {
          countryCode_ = response.data.countryCode;
          console.log(countryCode_);
        });
    });
}
catch(e) {
 countryCode_ = countryCode;
}

Answer 3

The first issue is this function doesn't properly return a promise. Rather than setting the variable countryCode_ and modifying that, you want to resolve with the final value once you have it. You almost don't need "countryCode_" at all. The issue there is then you have to calculate the formattedPrice for both cases in the if/else. Here's how I would do it:

import convertPrice from "./convertPrice";
import getCountryInfoByLanguage from "./getCountryInfoByLanguage";
import axios from "axios";
export default (language, price) => {
  const { countryCode, currency } = getCountryInfoByLanguage(language);

  return new Promise((resolve, reject) => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(position => {
        axios
          .get(
            `http://api.geonames.org/countryCodeJSON?lat=${
              position.coords.latitude
            }&lng=${position.coords.longitude}&username=...`
          )
          .then(response => {
            // assuming this response always exists
            const geoCountryCode = response.data.countryCode;
            console.log("countryCode from geolocation:", geoCountryCode);
            resolve(getFormattedPrice(geoCountryCode));
          });
      });
    } else {
      console.log("default countryCode:", countryCode);
      resolve(getFormattedPrice(countryCode));
    }
  });
};

function getFormattedPrice(countryCode) {
  const convertedPrice = Math.round(convertPrice(price, currency) * 10) / 10;
  const formattedPrice = convertedPrice.toLocaleString(countryCode, {
    style: "currency",
    currency: currency
  });
  console.log("formattedPrice:", formattedPrice);
  return formattedPrice;
}

When using this, it will still be async, so whatever is calling this will need to be async itself so you can use await , or you can call it as a promise with.then(() => {}).