React Native 无法使用来自 AsyncStorage 的数据更新 State Hook

Question

您好，我目前正在学习 React Native 中的 AsyncStorage。 所以我写了一些这样的状态

const [isLoading,setIsLoading] = useState(true)
const [id, setId] = useState(null)

我将它设置为 null 因为我想从 AsyncStorage 获取 id，所以我编写了一个简单的函数来获取和设置值，如下所示：

async function getAsyncStorageId(){
  const userId = await AsyncStorage.getItem('id')
  console.log('user id from AsyncStorage is: ',userId)
  setId(userId)
  console.log('state hooks id : ',id)
}

我把它放入 useEffect Hooks

 useEffect(()=>{
  getAsyncStorageId()
 },[])

所以我测试了我的代码，id 状态不会更新它保持为空，但是 console.log(userId) 有一个 id 值。

user id from AsyncStorage is:  6
state hooks id :  null

我不知道为什么我不能使用异步存储中的值设置状态

======================== *edit : 这是我用来在 AsyncStorage 中设置 id 的代码。 我将此代码放在我的登录屏幕中，因此当用户成功登录时，我会将 id、用户名、令牌和角色存储在异步存储中

const login = async () => {
try {
  let response = await axios.post(`${url}/users/login`, {
    email: props.email,
    password: props.password,
  });
  let loginData = response.data;
  console.log(loginData,'sukses login')
  setAsyncStorage('token',loginData.token)
  loginData.name === null ? setAsyncStorage('name', 'pengguna') : setAsyncStorage('name',loginData.name)
  setAsyncStorage('role', loginData.role)
  setAsyncStorage('id', loginData.id)

  props.navigation.navigate("Artikel",{
    id:loginData.id,
    token:loginData.token,
    name:loginData.name
  })

} catch (error) {
  console.log('error login',props.email,props.password);
  alert(error.response.data.message)
}

};

export const setAsyncStorage = async (key, value) => {
  try {
    await AsyncStorage.setItem(`${key}`, `${value}`);
  } catch (error) {
    console.log(error);
  }
};

===============更新2==========================

所以我尝试将登录函数中的 id 值更改为这样的字符串

const login = async () => {
try {
  let response = await axios.post(`${url}/users/login`, {
    email: props.email,
    password: props.password,
  });
  let loginData = response.data;
  console.log(loginData,'sukses login')
  setAsyncStorage('token',loginData.token)
  loginData.name === null ? setAsyncStorage('name', 'pengguna') : setAsyncStorage('name',loginData.name)
  setAsyncStorage('role', loginData.role)
  setAsyncStorage('id', loginData.id.toString())

  props.navigation.navigate("Artikel",{
    id:loginData.id,
    token:loginData.token,
    name:loginData.name
  })

} catch (error) {
  console.log('error login',props.email,props.password);
  alert(error.response.data.message)
}

};

============================= 这是我的个人资料屏幕页面中的完整代码，所以我尝试使用 setTimeout 到 console.log(id) 并运行函数来获取用户 ID，但仍然没有运气

import React, { useState, useEffect } from 'react'
import { KeyboardAvoidingView, Text, View, AsyncStorage } from 'react-native'

import ProfileForms from './ProfileForms/ProfileForms'
import axios from 'axios'
import styles from "../styles";
import {url} from '../config/variables'
import { ScrollView } from 'react-native-gesture-handler';

export default function ProfileScreen (){
  const [isLoading,setIsLoading] = useState(true)
  const [id, setId] = useState(null)
  const [name, setName] = useState(null)
 
  async function getAsyncStorageId(){
    const userId = await AsyncStorage.getItem('id')
    console.log('user id from AsyncStorage is: ',userId)
    await setId(userId)
    console.log('state hooks id : ',id)
  }

  async function getUserData(){
    console.log('getting userr data')
    try {
      let result = await axios.get(`${url}/users/${id}`)
      console.log(result.data)
      setName(result.data.name)
      setIsLoading(false)
    } catch (error) {
      console.log(error)
    }
  }

  function test(){
    getAsyncStorageId()
    setTimeout(() => {
      console.log(id)
      getUserData()
    }, 5000);
  }

  useEffect(()=>{
    test()
  },[])

  return( 
    <ScrollView>
    <KeyboardAvoidingView behavior={Platform.OS == "ios"? "padding" : "height"} style={styles.container}>
      {
        !isLoading &&
        <ProfileForms
          id={id}
          name={name}
          setName={setName}
        />
      }
      {
        isLoading &&
        <View>
          <Text>Loading</Text>
        </View>
      }
    </KeyboardAvoidingView>
    </ScrollView>
  )
}

===============再次更新=================

所以我创建了一个变量，并用这个变量替换了我的 id 状态，它可以工作.. 目前我认为我会坚持使用这个

let desperateId = null



async function getAsyncStorageId(){
  const userId = await AsyncStorage.getItem('id')
  console.log('user id from AsyncStorage is: ',userId)
  desperateId=userId
  await setId(userId)
  console.log('state hooks id : ',id)
}

Answer 1

我认为您只能将string 类型存储在AsyncStorage 中。尝试像这样设置值。

AsyncStorage.setItem('id', '5')

你的情况是这样的

setAsyncStorage('id', JSON.stringify(loginData.id))

更新：

const [id, setId] = useState('')