React中异步函数导致useState状态无法即时更新求助

你的问题核心是setState是异步操作：在setcountry(json["results"][0]["components"]["country"])执行后，state里的country并不会立刻更新，此时调用LocalCurrency(country)传入的还是初始的空字符串，所以fromCurrency会被设为默认的USD。只有组件重新渲染（比如刷新）后，country才会更新为正确值，LocalCurrency才能拿到有效参数。

下面是两种直接的解决方法：

方法一：直接使用接口返回的国家值（最简洁） #

不需要依赖state里的country，直接把接口返回的国家字符串传给LocalCurrency，跳过state异步更新的等待：

const [fromCurrency, setFromCurrency] = useState('');
const [country, setcountry] = useState('');

useEffect(() => {
  (async () => {
    let { status } = await Location.requestForegroundPermissionsAsync();
    if (status !== 'granted') {
      setErrorMsg('Permission to access location was denied');
      return;
    }

    let location = await Location.getCurrentPositionAsync({});
    const API_URL = `https://api.opencagedata.com/geocode/v1/json?q=${location["coords"]["latitude"]}%2C+${location["coords"]["longitude"]}&key=a6d141e0b2724551b1df99782db30631&pretty=1`;
    
    // 统一用async/await处理异步，更易读
    const response = await fetch(API_URL);
    const json = await response.json();
    const userCountry = json["results"][0]["components"]["country"];
    
    console.log(userCountry);
    setcountry(userCountry);
    // 直接传接口返回的真实国家值，而非state里的旧值
    LocalCurrency(userCountry);
  })();
}, []); // 空依赖数组确保只在组件挂载时执行一次

const LocalCurrency = (country) => {
  console.log("country", country);
  switch (country) {
    case 'Sweden':
      setFromCurrency('SEK');
      break;
    default:
      setFromCurrency('USD');
      break;
  };
};

方法二：监听country的变化（适合多场景复用） #

新增一个useEffect监听country的状态变化，当country更新为有效值时自动调用LocalCurrency：

const [fromCurrency, setFromCurrency] = useState('');
const [country, setcountry] = useState('');

useEffect(() => {
  (async () => {
    let { status } = await Location.requestForegroundPermissionsAsync();
    if (status !== 'granted') {
      setErrorMsg('Permission to access location was denied');
      return;
    }

    let location = await Location.getCurrentPositionAsync({});
    const API_URL = `https://api.opencagedata.com/geocode/v1/json?q=${location["coords"]["latitude"]}%2C+${location["coords"]["longitude"]}&key=a6d141e0b2724551b1df99782db30631&pretty=1`;
    
    fetch(API_URL)
      .then(response => response.json())
      .then(json => {
        const userCountry = json["results"][0]["components"]["country"];
        console.log(userCountry);
        setcountry(userCountry);
      })
  })();
}, []);

// 监听country变化，更新时触发货币设置
useEffect(() => {
  if (country) { // 避免初始空字符串时执行
    LocalCurrency(country);
  }
}, [country]); // 依赖country，状态更新时自动执行

const LocalCurrency = (country) => {
  console.log("country", country);
  switch (country) {
    case 'Sweden':
      setFromCurrency('SEK');
      break;
    default:
      setFromCurrency('USD');
      break;
  };
};

内容的提问来源于stack exchange，提问作者Program_Z