将变量反映到 React Native 中的视图

Question

我是 React native 的新手，我知道这个问题很常见，但我对如何根据 AsyncStorage 变量将变量反映到我的视图文本感到困惑，我'我用过 AsyncStorage 但它 returns 我出错了

错误：Can't find variable:username

我有这个

import React, {useContext,useState} from 'react';
import {
  View,
  Text,
  StyleSheet,
  ImageBackground,
} from 'react-native';
import {AuthContext} from '../navigation/AuthProvider';
import AsyncStorage from '@react-native-async-storage/async-storage';


const LoginScreen = ({navigation}) => {

  const {googleLogin} = useContext(AuthContext);
  const [state, setState] = useState(username);
  AsyncStorage.getItem('userPrivilege').then((variable) => {
    if (variable != null) {
      console.log("hoy");
      console.log(variable);
      setState({username: variable})   
    }
  }); 
  return (
    <View >
      <ImageBackground source={require('../assets/images/launch_screen.png')} style= {styles.backgroundImage}   >
        <Text>{state.username}</Text>
    </ImageBackground>
    </View>
    
  );
};

更新

它现在可以工作了，但是当我试图通过控制台打印值时，它在我的控制台中有无限的值，你知道问题出在哪里吗？

Answer 1

您的错误来自对 useState 工作原理的误解。

useState 中的值，state 在您的情况下采用您放入其中的类型，在您的情况下 username 在 string 或 undefined在乞讨.

所以 state 不是 object 在开始时。

要修复错误，您可以将状态初始化为

const [state, setState] = useState({username: ''});

Update 但它给我一个 error

Objects are not valid as a React child(Found: object with keys {username}).If you meant to render a collection of children, use an array instead.

代码

const [state, setState] = useState({username: ''});

AsyncStorage.getItem('userPrivilege').then((variable) => {
    if (variable != null) {
       setState({username: variable}) 
    }
}

return (
    <View>
       <Text>{state}</Text>
    </View>
     );
   }
});

将变量反映到 React Native 中的视图

Reflecting variable to View in React Native

javascript

react-native

asyncstorage