时间戳

首页 > 解决方案 > 在异步存储中检索保存的用户数据时出错 - React-native

react-native - 在异步存储中检索保存的用户数据时出错 - React-native

问题描述

ERROR 错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能由于以下原因之一而发生：

  1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM）
  2. 您可能违反了 Hooks 规则
  3. 您可能在同一个应用程序中拥有多个 React 副本有关如何调试和修复此问题的提示，请参阅https://reactjs.org/link/invalid-hook-call 。

我的代码：

const CustomSidebarMenu = (props) => {

  // const [token, setToken] = React.useState(null)
  const [userObj, setUserObject] = React.useState(null)

  React.useEffect(() => {
    const getData = async () => {
        try {
            const userInfo = await AsyncStorage.getItem('@u_info')
            if(userInfo !== null)
                await setUserObject(userInfo)
        } catch(e) {
        // error reading value
        }
        setLoaded(true)
    }

    getData()

    return () => null
},[])

return (
    <View style={stylesSidebar.sideMenuContainer}>
      <View style={stylesSidebar.profileHeader}>
        <View style={stylesSidebar.profileHeaderPicCircle}>
          <Text style={{fontSize: 25, color: '#307ecc'}}>
            {'School Pathram'.charAt(0)}
          </Text>
        </View>
        <Text style={stylesSidebar.profileHeaderText}>
        School Pathram
        </Text>
        <Text style={stylesSidebar.profileHeaderTextEmail}>
        {userObj.email}
        </Text>
      </View>
      <View style={stylesSidebar.profileHeaderLine} />
);

有人可以帮助我吗？我是这种反应原生技术的新手。我用这段代码寻找的是，登录后用户数据存储在存储中，在配置文件页面和导航侧栏中，尝试从存储中检索它。请提出解决方案。

提前致谢。

编辑 1：我需要在加载侧边栏/页面时设置检索到的数据。

编辑2：我也尝试了下面的代码，但同样的错误：

const [userObj, setUserObject] = useState(null)

  useEffect(async()=>{
    let userData = await AsyncStorage.getItem('@u_info')
                    
    setUserObject(userData)
  },[])

结果：在此处输入图像描述

编辑 3： 这与正常的配置文件屏幕完美配合：

import React, {useState, useEffect} from 'react';
import AsyncStorage from '@react-native-community/async-storage';


import {View, Text, Image, StyleSheet} from 'react-native';

const ProfileScreen = () => {

const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const [email, setEmail] = useState('');

 useEffect(async()=>{
    const userData = await AsyncStorage.getItem('@u_info')
    let userInfo = JSON.parse(userData);               
    setEmail(userInfo.email)
    setFirstName(userInfo.firstName)
    setLastName(userInfo.lastName)
  },[])


  return (
    <View style={styles.container}>
        <View style={styles.header}>
          <View style={styles.headerContent}>
              <Image style={styles.avatar}
                source={{uri: 'https://bootdey.com/img/Content/avatar/avatar6.png'}}/>

              <Text style={styles.name}>{firstName} </Text>
              <Text style={styles.userInfo}>{email}</Text>
              {/* <Text style={styles.userInfo}>Florida </Text> */}
          </View>
        </View>
...

看起来像是导航侧边栏的一些特定问题。

标签： react-nativereact-hookspersistence

解决方案

推荐阅读