响应钩子和异步操作

Question

我是新来的反应和JS。我需要帮助解决我创建的两个钩子：useSaveStorage和useGetStorage。

我的应用程序接收数据，必须将其写入我的AsyncStorage，但我的“@存储”中有空。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，所以不能将它放入if条件中。

我建议将useSaveStorage与useGetStorage相结合，公开store值和setStore函数。

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