Reactjs 如何在react render中使用async和Wait

我正在开发一个react本地应用程序，我想提供多语言支持。我还编写了languageHelper以便于管理

languageHelper.js

import AsyncStorage from '@react-native-async-storage/async-storage';

export const Translator = async (key) => {
    try {
        const langCode = await AsyncStorage.getItem('@lang_code')
        return I18n.t(key, { locale: langCode ?? 'en' })
    } catch (e) {
        return I18n.t(key)
    }
}

login.js

render() {
        return (
            <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
                <KeyboardAvoidingView behavior={'height'} style={styles.container}>
                    <ScrollView>
                        <ImageBackground source={require('../Sources/LoginBg.jpg')} style={styles.backgroundImage}>
                            <Layout style={styles.header}>
                                <Text category='h1' status='primary'> {Translator('Login_hello')}</Text>
                                <Text category='h6' status='primary'> {Translator('Login_signInMessage')}</Text>
                            </Layout> 

但由于转换器是一个异步函数，所以我不能在渲染中使用。（我尝试了异步渲染）

---

我怎样才能解决这个问题？感谢您的帮助。

这似乎是一个性能不太好的代码，但如果您想让它以任何方式工作，您可以在翻译过程中返回一个空字符串，如下所示：

从'@react native async storage/async storage'导入异步存储；
export const Translator=React.memo（{key}）=>{
const[text，setText]=useState（“”）
React.useffect（（）=>{
翻译（）
}，[键]）
const translate=async（）=>{
试一试{
const langCode=wait AsyncStorage.getItem（“@lang\u code”）
setText（I18n.t（键，{locale:langCode？？？'en'}））
}捕获（e）{
setText（I18n.t（键））
}
}
返回(
{text}
)
})

您可以在代码中这样使用它（使用您的示例）：

render（）{
返回(

您还可以让翻译人员接受样式化道具来定制最终结果。在那里使用

备忘录

也非常重要，这样您的翻译组件上就不会有额外的渲染，因为它总是从异步请求

其他解决方案

实际上，我建议的解决方案是创建一个翻译提供程序，并在那里全局配置i18n，这样您就只有一个存储请求，而且您的翻译组件的加载成本也会更低

---

项目成功。

在

组件中请求翻译将装载
并将结果保存在状态中，然后呈现这些状态变量。这很有效。非常感谢。我还将回顾您建议的其他解决方案。
Error: Objects are not valid as a React child (found: object with keys {_U, _V, _W, _X}). If you meant to render a collection of children, use an array instead.