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(()=>{
  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('')

React Native无法使用AsyncStorage中的数据更新状态挂钩

1 个答案: