从异步存储中反应本机加载数据返回未定义答案

【问题标题】：React native loading data from async storage returns undefined从异步存储中反应本机加载数据返回未定义
【发布时间】：2021-09-05 23:12:21
【问题描述】：

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

[未处理的承诺拒绝：SyntaxError: JSON Parse error: Unexpected identifier "undefined"]

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

[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:]

我搜索了这个错误，我发现它假设我在课堂上调用了钩子。然而这不是事实，因为我只是在 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>
  );
}

【问题讨论】：

1.确保始终为您使用的语言添加语言标签以突出显示语法。 2. 创建一个minimal 复制案例，不要只是转储你的整个文件。 3、UserData既不是钩子也不是函数组件，所以不能在里面使用useState。
非常感谢您的回答！根据您的回答，我尝试将useState 移动到我的UserProfile() 并在那里进行setuserData(UserData())。我还更改了UserData() 以返回storage.load 的结果，并且在.then 我做了：ret => return ret.info 但也返回undefined。你能否给我更多的解释，我该如何解决它？
请添加storage代码。看起来您的问题出在 storage.load ... 中，应该重构为 useStorage
我没有创建这些方法。我只是使用这个模块来保存和加载存储中的数据：openbase.com/js/react-native-storage。以下是我如何从存储中加载它，如果它是你所要求的：storage.save({ key: "user", data: { info: result, }, expires: 1000 * 36000, }); DevSettings.reload();

标签： javascript react-native

【解决方案1】：

好的，我想通了。为了正确执行它，我必须处理从 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();
  }, []);

【讨论】：