React函数组件如何执行异步操作获取常量 解决useState返回Promise问题

问题核心原因 #

你定义的DEFAULT_LANGUAGE本身是异步函数，调用后返回的是Promise实例，且异步操作无法在同步的常量初始化阶段直接返回结果：JS执行时会先跑完所有同步代码，再处理异步微任务，React的useState是同步执行的，不会等待异步逻辑完成，所以直接把DEFAULT_LANGUAGE当初始值传入，必然只会拿到Promise对象，拿不到实际返回值。

解决方案 #

方案1：组件内通过useEffect触发异步取值 #

给useState先设置兜底初始值，在组件挂载后调用异步方法获取存储的语言，再更新状态即可：

import { DEFAULT_LANGUAGE } from './translations';
import React, { useState, useEffect } from 'react';

export const Welcome = () => {
    // 兜底初始值和异步函数的默认返回保持一致
    const [appLanguage, setAppLanguage] = useState('English');

    useEffect(() => {
        // 包裹异步执行逻辑
        const getInitLanguage = async () => {
            const lang = await DEFAULT_LANGUAGE();
            setAppLanguage(lang);
        }
        getInitLanguage();
    }, [])

    console.log(appLanguage); 
    // 首次渲染打印兜底值English，拿到存储值后触发重渲染，打印实际存储的语言
};

方案2：抽成通用自定义Hook复用 #

如果多个组件都需要获取语言值，可以把逻辑抽成自定义Hook避免重复代码：

// useAppLanguage.js
import { useState, useEffect } from 'react';
import { DEFAULT_LANGUAGE } from './translations';

export const useAppLanguage = () => {
    const [lang, setLang] = useState('English');
    // 新增加载态，避免语言切换时的闪变
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const initLang = async () => {
            const res = await DEFAULT_LANGUAGE();
            setLang(res);
            setLoading(false);
        }
        initLang();
    }, [])

    return { lang, loading };
}

组件内调用示例：

import { useAppLanguage } from './useAppLanguage';

export const Welcome = () => {
    const { lang: appLanguage, loading } = useAppLanguage();
    // 加载阶段可以渲染占位组件，避免界面内容闪烁
    if (loading) return null;

    // 后续业务逻辑
};

如果需要全局统一管理语言状态，也可以结合Context、Redux等状态管理方案，在应用根节点初始化的时候完成异步取值，注入到全局状态后再渲染业务组件即可。

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