有什么方法可以将从 APISAUCE API 收到的响应作为缓存存储到异步存储中，并在 React Native 的平面列表中显示

Question

我正在使用 APISAUCE 从节点服务器获取响应，然后在 FlatList 中显示数据。我实际上想要做的是将此响应存储在 AsyncStorage 中作为缓存，因此当应用程序处于离线状态时，必须从 AsyncStorage 中检索要显示在 FlatList 中的数据，而不是从服务器中获取它。

这是我的代码实现：

 import { create } from "apisauce";

const apiClient = create({
    baseURL : "http://192.168.10.9:9000/api"

    });



    export default apiClient;

import apiClient from "./client";

    
const endpoint = "/listings";

const getListings =() =>{

    return apiClient.get(endpoint);
}

export default {getListings};

import React , { useState } from "react";

export default useAPI=(API)=> 
{
 const[data,setData]=useState([]);
 const [error , setError]=useState(false);
 const [isLoading ,setLoading]=useState();


 
const request = async()=> {
    setLoading(true);
    const response = await API();
    setLoading(false);
    if(!response.ok) return setError(true);
 
 
     setError(false);
     setData(response.data);
     
    
 }

 return {error , data ,isLoading ,request  }

}


function ListingScreen({navigation}) {

  const loadListing= useAPI(getListings.getListings);
 

useEffect(()=>{

loadListing.request();

}, []);


    return (
        <View style={styles.container} >
{loadListing.error && (
    <View style={{marginTop:60}}>
        <Text style={{textAlign:"center"}}>
            Cannot Retrieve Data From Server
        </Text>

        <AppButton title="retry" onPress={loadListing.request} />
    </View>
)}

{loadListing.isLoading ?  <View>
    
            <ActivityIndicator animating={true} size={80} color="grey" />
         </View>  : 

       <FlatList data={loadListing.data} keyExtractor={list=>list.id.toString()}
        
        renderItem ={({item}) => <Card title={item.title} subtitle={"$" +item.price} 
        image={item.images[0].url} onPress={()=>navigation.navigate("ListingDetails" ,item )}  />

    } />
}

</View>
    );

}

Answer 1

当用户打开应用时：

首先检查本地存储
如果那里有数据，解析数据，然后将数据呈现给您的平面列表。
如果未找到，请向您的 url 请求，然后将数据转换为字符串并存储在存储器中。最后更新您的数据。

import React , { useState } from "react";

export default useAPI=(URL)=> 
{
 const[data,setData]=useState([]);
 const [error , setError]=useState(false);
 const [isLoading ,setLoading]=useState();

const _getDataFromStorage = async () => {
  /*
  - Getting data from async storage
  - If data wasn't null, Parse data for covering string to object 
  and update your states and return true
  - If data was null return false*/
}
 
const request = async ()=> {
   try {
    if (await _getDataFromStorage()) {
      return;
    }

    setLoading(true);
    const response = await fetch(
      URL,
      //your request options
    );
    setLoading(false);
    if(!response.ok) 
      return setError(true);
    
    const responseJson = await response.json();
    setError(false);
    setData(responseJson.data);
   } catch (error) {
     console.error(error);
     setError(true);
   }
    
 }

 return {error , data ,isLoading}
}

并进行其他实施。

有什么方法可以将从 APISAUCE API 收到的响应作为缓存存储到异步存储中，并在 React Native 的平面列表中显示

IS there any Way To store response received from APISAUCE API into the Async Storage as cache and show it in Flat List in React Native

react-native

react-hooks

react-native-flatlist

asyncstorage