javascript - 应用程序函数从 React Native 中的异步操作中不返回任何内容

Question

我对 React Native 完全陌生，这是我编写的第一个代码。我不确定如何从我的 App() 封闭函数中返回我的 jsx，因为它有一个异步操作。我怀疑这是一个非常基本的错误，所以希望我的代码能清楚地显示问题：

import React from 'react';
import { Text, View, TextInput, Button, Alert } from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';

//check if logged in, if not show login screen
export default function App() {
    AsyncStorage.getItem("user")
    .then((user) => {
        if(user) {
            //user validated
            return (
                <View>
                    <Text>Logged In!</Text>
                </View>
            );
    
        } else {
            //user not logged in, therefore show login screen
            return (
                <View>
                    <Text>Enter Your Username</Text>
                    <TextInput 
                        maxLength={16} 
                    />
                    <Button 
                        title="Login"
                    />
                </View>
            );
        }
    });
}

外部 App() 函数显然没有返回任何内容，但我不确定如何让它等待并从内部异步函数返回 jsx。

我尝试过的： 我最初在外部函数和上使用了 async/await AsyncStorage.getItem(...)，但是返回了以下错误： Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

接下来，我在 SO 阅读了类似问题的答案后尝试了一种不同的方法：

export default function App() {
    return (
        <View>
            <Login />
        </View>
    );

    async function Login() {
        const user = await AsyncStorage.getItem("user");

        if(user) {
            return (
                <Text>Logged In!</Text>
            );
        } else {
            return (
                <Text>Enter Your Username</Text>
            );
        }
    }
}

但是当我使用 async/await 时，我得到了与上面相同的错误。

我是 React Native 的新手，所以请用“傻瓜”的解释打我。

标签： javascriptreactjsreact-native

Answer 1

正如我在评论中所说，因为你的 JSX 被包装在一个 Promise 中（因为异步函数总是返回一个 Promise），React 说Objects are not valid as a React child。

您可以使用useState和useEffect挂钩来维护用户状态并获取用户。例如：

function Login() {
    const [user, setUser] = useState();
    useEffect(() => {
        if(!user) {
            AsyncStorage.getItem('user')
                .then(user => setUser(user));
                // .catch()
        }
    }, [user, setUser]) // also add any other required dependencies

    if(user) {
        return (
            <Text>Logged In!</Text>
        );
    } else {
        return (
            <Text>Enter Your Username</Text>
        );
    }
}