来自异步存储的React本机加载数据返回未定义

Question

我正在尝试以react native从异步存储加载数据。我设法将API中的所有用户数据加载到异步存储中，并能够在UserData((中显示它，但是当我试图将接收到的数据返回到其他组件时，我得到了：

[未处理的承诺拒绝：SyntaxError:JSON分析错误：意外的标识符"未定义"]

我假设数据是异步返回的，所以我试图等待它，但后来我得到了：

[Unhandled promise rejection: Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:]

我搜索了这个错误，发现的只是它假设我在类中调用hook。然而，这不是事实，因为我只是在UserProfile((中使用了setState((来保存从UserData((接收的数据。有人能告诉我我做错了什么吗？感谢您提前提供的帮助。

我用来从检索用户数据的函数

import React, { useState } from "react";
import { View, Text } from "react-native";
import storage from "./Storage";
export default function UserData() {
const [userData, setuserData] = useState();
storage
.load({
key: "user",
autoSync: true,
syncInBackground: true,
})
.then(ret => {
setuserData(JSON.stringify(ret.info));
})
.catch(err => {
// console.warn(err.message);
return;
});
if (userData) return userData;
}

显示用户配置文件的功能：

import React, { useState, useEffect } from "react";
import DeleteUser from "./DeleteProfile";
import PayPal from "../navigation/PayPal";
import { Button, TextInput, Text, ScrollView, View, Image } from "react-native";
import Styles from "../../styles/Styles";
import storage from "../elements/Storage";
import UserData from "../elements/GetUserData";
export default function UserProfile() {
const [email, setEmail] = useState("");
const [name, setName] = useState("");
const [phone, setPhone] = useState("");
const [premium, setpremium] = useState(false);
const [admin, setAdmin] = useState(false);
const [id, setId] = useState("");
const [checkout, setCheckout] = useState(false);
const info = UserData();
useEffect(() => {
async function getData() {
const result = JSON.parse(info);
setEmail(result.email);
setName(result.name);
setId(result._id);
setPhone(result.phone);
setpremium(result.premium);
setAdmin(result.admin);
}
getData();
}, []);
return (
<ScrollView style={Styles.userProfile}>
<View style={(Styles.bigBar, { textAlign: "center" })}>
<Text style={Styles.h1}>Profile Page</Text>
</View>
<View style={Styles.profileContent}>
<View>
<Image
style={Styles.profileImg}
source={{
uri: "https://i.pinimg.com/736x/8b/16/7a/8b167af653c2399dd93b952a48740620.jpg",
}}
/>
</View>
<View>
<View>
<View style={Styles.profileView}>
<Text style={Styles.h6}>User name: </Text>
</View>
</View>
<View>
<View style={Styles.profileView}>
<Text style={Styles.h6}>Email: </Text>
</View>
</View>
<View>
<View style={Styles.profileView}>
<Text style={Styles.h6}>Phone number: </Text>
</View>
</View>
<View>
{/* {premium && ( */}
<View style={Styles.profileView}>
<Text style={Styles.h6}>premium: </Text>
</View>
{/* )} */}
</View>
<View>
{/* {!premium && ( */}
<View style={Styles.profileView}>
<Text style={Styles.h6}> premium: </Text>
<View
style={{
color: "red",
}}
></View>
</View>
{/* )} */}
</View>
{/* {admin && ( */}
<View style={Styles.profileView}>
<Text style={Styles.h6}>Admin: </Text>
<View style={{ color: "green" }}></View>
</View>
{/* )} */}
</View>
<View>
<View>
<View style={Styles.profileView2}>
<Text style={Styles.h6}>{name}</Text>
</View>
</View>
<View>
<View style={Styles.profileView2}>
<Text style={Styles.h6}>{email}</Text>
</View>
</View>
<View>
<View style={Styles.profileView2}>
<Text style={Styles.h6}>{phone}</Text>
</View>
</View>
<View>
{/* {premium && ( */}
<View style={Styles.profileView2}>
<View style={{ color: "orange" }}>
<Text style={Styles.h6}> POSIADANE</Text>
</View>
<View style={{ marginBottom: 1 }} />
</View>
{/* )} */}
</View>
<View>
{/* {!premium && ( */}
<View style={Styles.profileView2}>
<View
className="inline"
style={{
color: "red",
}}
>
{checkout ? (
<View style={{ margin: 0 }}>
<PayPal />
</View>
) : (
<View style={Styles.smlBtn}>
<Button
style={{ marginLeft: 1, marginBottom: 1 }}
onPress={() => setCheckout(true)}
title="BUY PREMIUM"
/>
</View>
)}
</View>
</View>
{/* )} */}
</View>
{/* {admin && ( */}
<View style={Styles.profileView2}>
<View style={{ color: "green" }}>
<Text style={Styles.h6}> TRUE</Text>
</View>
</View>
{/* )} */}
</View>
</View>
<View>
{/* <DeleteUser id={id} /> */}
{/* <Link
className="rf update better"
to={{
pathname: `/editProfile/?${id}`,
}}
>
UPDATE
</Link> */}
</View>
</ScrollView>
);
}

Answer 1

好吧，我想明白了。为了正确执行它，我不得不用then处理从UserData((返回的Promise。最后看起来是这样的：

useEffect(() => {
async function getData() {
await UserData().then(result => {
setEmail(result.email);
setName(result.name);
setId(result._id);
setPhone(result.phone);
setpremium(result.premium);
setAdmin(result.admin);
});
}
getData();
}, []);