AsyncStorage 不用于发布但用于调试（React Native）

Question

 "@react-native-async-storage/async-storage": "1.15.5",
 "react": "17.0.1",
 "react-native": "0.64.2",

Here's how I use my Async

fetch('',{
... //codes here
.then((response) => response.json())
      .then((responseJson) => {

     AsyncStorage.setItem('user_token', JSON.stringify(responseJson.token));
     AsyncStorage.setItem('user_id', JSON.stringify(responseJson.data));
     AsyncStorage.setItem('login_type', 'LocalLogin');
     
   });
});

then after that here's how I get my asyncstorage

const [getData, setGetData] = useState();

const initializeData = async() => {
    const userToken = await AsyncStorage.getItem('user_id');
    if(userToken)
    {
      setGetData(JSON.parse(userToken));
    }
  }

  useEffect(() => {
    initializeData();
  },[]);

useEffect(() => {
    getUserData();
,[navigation,isFocused]);

const getUserData = async() => {
 var formBody = JSON.stringify({email:`${getData.email}`});
 fetch('',{ ... //more codes here
}

I should get the updated data from my API but it seems like the getData is null and also it should work because I am re rendering the components. Fetch is working fine because I can login . the main problem i am having is the AsyncStorage . Did someone encounter this kind of problem?

Answer 1

You have a race condition where initializeData and getUserData will both be called on mount, and getData won't be set yet.

You can fix the race like this.

useEffect(() => {
    if (getData) getUserData();
,[navigation,isFocused,getData]);

Answer 2

I saw it on my adb logcat that it can't store too much data

So what I did is I chopped my data and store only the needed data . That's what I did.

Answer 3

AsyncStorage 大小默认设置为 6MB，但是当它带有大量数据时，如果您想存储所有数据，则必须增加大小，您可以进入 android/gradle.properties 和 // 添加以下行 AsyncStorage_db_size_in_MB=10 或AsyncStorage_db_size_in_MB=15 取决于你必须存储的数据