React Hooks 和异步操作

Question

I'm new to React and JS. I need help with 2 hooks I created: useSaveStorage and useGetStorage .

My app receives data and must write it into my AsyncStorage, but I have null in my "@storage". useRequest works correctly.

I think it happened because it is asynchronous operations, but i don't know how to fix it. This is my hook useSaveStorage :

import React, {useState, useEffect} from 'react';
import AsyncStorage from '@react-native-community/async-storage';

export const useSaveStorage = (data, storage) => {
  const [error, setError] = useState(null);
  useEffect(() => {
    if (data) {
      AsyncStorage.setItem(storage, JSON.stringify(data))
        .then(res => {})
        .catch(err => {
          console.log(storage, setError(err));
        });
    }
  }, []);

  return {error};
};

Now useGetStorage :

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

export const useGetStorage = storage => {
  const [store, setStore] = useState(null);
  useEffect(() => {
    console.log('useGetStorage: run');
    AsyncStorage.getItem(storage).then(res => {
      setStore(JSON.parse(res));
      console.log('store', store);
    });
  }, []);
  return {store};
};

And here is where I use it:

import React from 'react';
import {Text} from 'react-native';
import Loading from './screens/Loading';
import {useRequest} from '@umijs/hooks';
import {useSaveStorage} from './components/useSaveStorage';
import {useGetStorage} from './components/useGetStorage';

const Context = React.createContext(null);

export const AppContextProvider = ({children}) => {
  const {data, error, loading} = useRequest('http://10.0.2.2:3000/data', {
    initialData: {},
    loadingDelay: 5,
  });

  useSaveStorage(data, '@storage');
  const {store} = useGetStorage('@storage');

  const anyData = data || store;

  if (loading) {
    return <Loading />;
  }

  if (error) {
    <Text>Not a network</Text>;
  }

  return <Context.Provider value={anyData}>{children}</Context.Provider>;
};

export const useContextData = () => {
  return React.useContext(Context);
};

Answer 1

Since useSaveStorage is a React Hook, you can't put it inside an if condition.

I would suggest combining useSaveStorage with useGetStorage and expose store value and setStore function.

useStorage.js

/* imports */
export const useStorage = (storage) => {
  const [error, setError] = useState(null)
  const [loading, setLoading] = useState(false)
  const [data, setData] = useState(null)

  /*
  this will load data from storage once, when component is mounting,
  after that we will use internal state
  */
  useEffect(() => {
    setLoading(true)
    /* async logic to get data from store */
    asyncGetStorage(storage).then(value => {
      setData(value)
      setLoading(false)
    }).catch(setError)
  }, [])

  const setStore = (value) => {
    setLoading(true)
    /* Logic to set data,  */
    asyncSetStorage(storage, value).then(() => {
      setData(value)
      setLoading(false)
    }).catch(setError)

  }

  return { error, loading, store: data, setStore }
}

When you use it

  const {data, error, loading} = useRequest('http://10.0.2.2:3000/data', {
    initialData: {},
    loadingDelay: 5,
  });
  const {error: storeError, loading: storeLoading, store, setStore } = useStorage('@storage')

  useEffect(() => {
    if (!error && !loading) {
      setStore(data)
    }

  }, [data, error, loading])

  const anyData = data || store