如何在 React Native 中将数据从异步函数传递到 Drawer Navigator

Question

我是一个反应原生的新手，但正在尝试构建我自己的应用程序。 我正在尝试将从 DB 获得的 storeKey 和 userName 传递给 CustomDrawer 和 Drawer.Screen，因此我不需要每次都重复该函数。 所以，它在 HomeScreen 内工作，console.log 打印正确的值。但是，当我在 Drawer.Screen 'stock' 中传递它，然后在该模块中打印它时，它显示为空数组。
如何正确地将值从异步传递到抽屉导航器？ 以及如何将其传递给 CustomDrawer？ {...props} 是否已经包含该值？ 当我在 CustomDrawer 模块中打印 props.params 时，它只显示 undefined..

const HomeScreen = ({ navigation }) => {

const [storeKey, setStoreKey] = useState([]);
const [userName, setName] = useState([]);
useEffect(async() => {
    let isMounted = true;
    if(isMounted){
        console.log('zzzz')
        const auth = getAuth();
        const user = auth.currentUser;
        if(user !== null){
            const email = user.email;
            const UserInfo = await getDoc(doc(db, 'users', email));
            if(UserInfo.exists()){
                setName(UserInfo.data().name);
                setStoreKey(UserInfo.data().storeKey)
                return () => {
                    isMounted = false
                }
            }
            else{
                console.log('None')
            }
    }
}
}, [storeKey]);

console.log('this',storeKey)

return (
    <Drawer.Navigator drawerContent={props => <CustomDrawer {...props} />} screenOptions={headerStyles} initialRouteName={HomeScreen} >
        <Drawer.Screen name='Search' component={SearchScreen} options={QuitIcon}/>
        <Drawer.Screen name='Stock' component={StockScreen} options={QuitIcon} initialParams={{storeKey: storeKey}}/>
    </Drawer.Navigator>
)

}

Answer 1

即使 UseEffect 是 async 或 none 以下代码也是一样的，

当调用console.log('this', storeKey) 时，数据尚未处于状态，要等待 useEffect 运行才能继续代码，您必须在 useEffect 函数中添加一个空数组作为第二个参数，如下所示：

useEffect(() => {
  
}, []) // <-- empty array here

通过这种方式，您的 useEffect 将仅在应用的第一次渲染时运行，程序将等待 useEffect 运行后再继续。