AsyncStorage存取值异常排查：setItem无回调、getItem返回空怎么办？

Hey there, let's break down what's going on here and fix your AsyncStorage problems! The core issues stem from how AsyncStorage works (it's fully asynchronous) and where you're executing these operations.

Why You're Seeing Empty Values & Unfired then() Callbacks #

1. Constructor is synchronous, AsyncStorage is not
   The constructor runs synchronously when your component initializes. When you call AsyncStorage.setItem() here, it kicks off an asynchronous Promise—but your getItem function runs immediately afterward, before the setItem operation has finished writing to storage. That's why you get an empty result.

2. Missing error handling
   If your then() callback isn't firing, it's almost always because the setItem Promise is rejecting (failing) silently. AsyncStorage Promises don't throw uncaught errors by default—you have to explicitly add a catch() handler to see what's going wrong.

Step-by-Step Fixes #

1. Move Async Logic to the Right Lifecycle Method #

Never run asynchronous operations in the constructor. For class components, use componentDidMount; for functional components, use useEffect. These methods are designed for initialization logic that involves async work.

2. Use Async/Await for Readable Flow #

Async/await makes asynchronous code easier to read and ensures operations run in sequence. Pair it with try/catch to catch errors properly.

Example Fixed Code (Class Component) #

import AsyncStorage from '@react-native-async-storage/async-storage';

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    // Keep constructor for sync initialization only
  }

  async componentDidMount() {
    try {
      // First, store the token (wait for it to finish)
      await AsyncStorage.setItem('accessToken', 'your-valid-token-here');
      console.log('Token saved successfully!');

      // Now fetch the token after it's been stored
      const token = await this.getAccessToken();
      console.log('Retrieved token:', token);
    } catch (error) {
      // Catch any errors from setItem or getItem
      console.error('AsyncStorage error:', error);
    }
  }

  async getAccessToken() {
    try {
      const token = await AsyncStorage.getItem('accessToken');
      return token;
    } catch (error) {
      console.error('Failed to retrieve token:', error);
      return null;
    }
  }
}

Example Fixed Code (Functional Component) #

import AsyncStorage from '@react-native-async-storage/async-storage';
import { useEffect } from 'react';

function YourComponent() {
  useEffect(() => {
    const initToken = async () => {
      try {
        await AsyncStorage.setItem('accessToken', 'your-valid-token-here');
        const token = await getAccessToken();
        console.log('Retrieved token:', token);
      } catch (error) {
        console.error('AsyncStorage error:', error);
      }
    };

    initToken();
  }, []);

  const getAccessToken = async () => {
    try {
      const token = await AsyncStorage.getItem('accessToken');
      return token;
    } catch (error) {
      console.error('Failed to retrieve token:', error);
      return null;
    }
  };

  return <div>{/* Your component JSX */}</div>;
}

Additional Checks #

• Verify AsyncStorage Installation: If you're using React Native 0.60+, AsyncStorage was moved to a separate package. Make sure you've installed it with npm install @react-native-async-storage/async-storage (and linked it if using older RN versions).
• Check Your Token Value: Ensure the accessToken you're trying to store isn't empty or undefined in the first place.
• Clear App Cache: If testing on a simulator/emulator, sometimes cached storage can cause issues. Try restarting the simulator or clearing your app's data.

内容的提问来源于stack exchange，提问作者Ketan Malhotra