如何使用钩子等待身份验证对象?(React Native 中的 MongoDB Stitch)

Question

我正在使用React Native来构建一个依赖MongoDB Stitch进行身份验证的应用程序。通常情况下，应用程序崩溃是因为当我在以下代码行中使用客户端对象时尚未加载。我得到的错误是臭名昭著的TypeError：undefined不是一个对象，然后评估'client.auth.user'。

import React from 'react';
import { View, Text } from 'react-native';
import { Stitch } from 'mongodb-stitch-react-native-sdk';
const APP_ID = '<my app ID>';
const client = Stitch.hasAppClient(APP_ID)
? Stitch.getAppClient(APP_ID)
: Stitch.initializeDefaultAppClient(APP_ID);
const { user } = client.auth;
const Home = () => {
return (
<View style={styles.home}>
<Text>HOME</Text>
<Text>Hi {user.profile.data.email}</Text>
</View>
);
};
export default Home;
const styles = {
home: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center'
}
};

MongoDB Stitch NPM 包提供的示例使用componentDidMount(见这里(，但我正在尝试使用 Hooks 完成这项工作。我已经尝试了useEffect，一堆if语句，async/await，将对象置于useState的状态中;没有运气。

Answer 1

所以是的，你可以使用 useEffect 钩子来实例化客户端并获取用户信息。

useEffect(() => {
_loadClient();
}, []);
const [client,setClient] = useState({});
const [user,setUser] = useState({});
_loadClient() {
Stitch.initializeDefaultAppClient('<your-client-app-id>').then(client => {
setClient(client);
if(client.auth.isLoggedIn) {
setUser( client.auth.user)
}
});

}

这应该可以做到。