javascript - React Javascript 等待完成

Question

当我从AsyncStorage获取数据时，它不会等待显示

它在捕获值之前返回值。

我无法在函数上使用 Async Await。如果是这样，则无法编译。

我今天搜索了一整天，但没有找到答案。

如何解决这个简单但对我来说很复杂的问题？

react 代码

import React from 'react';
import { StyleSheet, View, Text, AsyncStorage, TouchableOpacity } from 'react-native';
import { useSelector, useDispatch } from 'react-redux';
import { getUsername } from '../actions';


export default HomeScreen = ({ navigation }) => {

    DisplayUsername = () => {
        var info = useSelector(state => state.login_info_reducer);
        if (Object.entries(info).length === 0 && info.constructor === Object) {
            AsyncStorage.getItem('username').then(name => {
                info.username = name;

                return info;
            });
        }
        else {
            return info;
        }
    }

    return (
        <View style={styles.container}>

            <TouchableOpacity onPress={() => { navigation.navigate('Friends') }}>
                <Text>Welcome {DisplayUsername()}</Text>
                <Text>Click Here</Text>
            </TouchableOpacity>
        </View>
    )
}



const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    }
});

Answer 1

(免责声明——我熟悉 Web 版本的 React，但我猜测这些模式在 React-native 中即使不相同，也是相似的。)

您尝试在同步操作 (render) 期间执行异步操作 (DisplayUsername)。 React 不允许渲染是异步的；你的渲染函数总是需要返回 React 可以理解的东西(UI 元素或空值，例如 null 或空数组)。

这意味着您的组件有两种状态:一种状态是它还不知道用户名是什么，另一种状态是它已完成使用 AsyncStorage，并且它确实知道用户名。这暗示您可以使用 React state 来保存用户名数据。

在 React 中获取外部数据的“标准”方法是在组件的 componentDidUpdate 方法(该方法在组件首次渲染后触发)或 useEffect 中执行> 与功能组件 Hook (每次渲染后都会触发)。这就是您想要实现的:

1. 组件第一次渲染，没有用户名。也许它显示了一个加载器元素？
2. 组件从 AsyncStorage 异步获取用户的用户名
3. 收到结果后，更新组件状态
4. 状态更改始终会触发重新渲染，因此现在您可以使用用户名进行渲染

下面是一些使用功能组件实现这些步骤的伪代码:

export default HomeScreen = ({ navigation }) => {
    // set up state and setter for username state
    const [username, setUsername] = useState('');
    // effect hook for fetching username
    useEffect(() => {
      doSomethingToGetUsername().then(result => {
        setUsername(result);
      }).catch(error => {
        console.log(error);
      });
    }, [username]);

    const usernameTxt = ` ${username}` || '';

    return (
        <View style={styles.container}>
            <TouchableOpacity onPress={() => { navigation.navigate('Friends') }}>
                <Text>Welcome{usernameTxt}</Text>
                <Text>Click Here</Text>
            </TouchableOpacity>
        </View>
    )
}