AsyncStorage 在第一次启动时不 return null

Question

我正在使用 JWT 和 deviceStorage 进行登录，它工作正常，但每次我启动应用程序，并且从 deviceStorage 中删除 JWT 时，它开始时就好像已经登录了一样。问题是 get 方法在 deviceStorage return 中是一个承诺，所以我需要将 get 方法 return 设置为空，或者让我的程序知道它是字符串还是承诺

APP.JS

import 'react-native-gesture-handler';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import React, { useState, useEffect } from 'react';
import Login from './src/Pages/Login';
import LoggedIn from './src/Pages/LoggedIn';
import deviceStorage from './src/Service/deviceStorage';

const App = () => {
  
  const [JWT, setJWT] = useState(null);

  useEffect(() => {
    const checkJWT = () => {
    setJWT(deviceStorage.getValue())
  }
  checkJWT()
  }, []

  );
  
  const checkJWT = () =>{
    if (!JWT || JWT === null || JWT === "") {
      return <Login setJWT={setJWT} />
    }else if (JWT){
      return <LoggedIn JWT={JWT} setJWT={setJWT} />
    }
  }

  return (
    <SafeAreaProvider>
    {checkJWT()}
    </SafeAreaProvider>
  )
}

export default App

设备存储

import AsyncStorage from '@react-native-async-storage/async-storage';
const key = 'currentUser';

const deviceStorage = {
  
    async saveItem(value) {
        try {
          const jsonValue = JSON.stringify(value)
          await AsyncStorage.setItem(key, jsonValue);
        } catch (error) {
          console.log('AsyncStorage Error: ' + error.message);
        }
        console.log('Done saving Value.')
      },

      async getValue() {
        try {
          return await AsyncStorage.getItem(key)
        } catch(e) {
          console.log('AsyncStorage Error: ' + e.message);
        }
      
        console.log('Done getting value.')
      },
      async removeValue() {
        try {
          await AsyncStorage.removeItem(key)
        } catch(e) {
          console.log('AsyncStorage Error: ' + e.message);
        }
      
        console.log('Done removing Value.')
      }

      
};

export default deviceStorage;

我希望有人能帮我解决这个问题

Answer 1

试试这个功能：

async getValue() {
        try {
           let value = null;
           value = await AsyncStorage.getItem(key);
           return value;
        } catch(e) {
          console.log('AsyncStorage Error: ' + e.message);
        }
      
        console.log('Done getting value.')
      }

Answer 2

正如您所指出的，deviceStorage returns 的 get 方法目前是一个承诺。我认为您可以执行以下操作之一：

如果 useEffect 可以接受 async 方法，我认为这应该可行：

useEffect(async () => {
    const checkJWT = () => {
        setJWT(await deviceStorage.getValue())
    }
    checkJWT()
}, []);

如果没有，那么这样的事情应该可行：

useEffect(() => {
    const checkJWT = () => {
       deviceStorage.getValue().then(value => setJWT(value));
    }
    checkJWT()
  }, []);

我还没有在任何地方检查过它是否有效，但按照这些思路应该可以解决问题。您应该确保确实在 setJWT 方法中放置了 JWT 而不是 Promise。或者你可以改变你的 setJWT 方法，让它知道，如果它收到了承诺，那么你必须等待结果。

AsyncStorage 在第一次启动时不 return null

AsyncStorage doesn't return null at first start

react-native

jwt

asyncstorage