React Hooks и asyn c операции

Question

Я новичок в React и JS. Мне нужна помощь с двумя созданными мной хуками: useSaveStorage и useGetStorage.

Мое приложение получает данные и должно записать их в мой AsyncStorage, но в моем "@storage" есть ноль. useRequest работает правильно.

Я думаю, это произошло потому, что это асинхронные операции, но я не знаю, как это исправить. Это мой крюк 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};
};

Сейчас 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};
};

И вот где я его использую:

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

Поскольку useSaveStorage является React Hook, вы не можете поместить его в условие if.

Я бы предложил объединить useSaveStorage с useGetStorage и выставить значение store и * Функция 1008 *.

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 }
}

При использовании

  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