如何缓存数据并在反应中获取? [英] How to cache data and fetch in reactnative?

问题描述

我是 Reactnative 和 Javascript 的新手，我正在尝试从 APi 缓存数据并获取它.但它不起作用.我无法呈现数据.我收到错误.没有互联网时，如何从缓存中缓存和检索数据?我已经实现了如下缓存代码:

I am new to Reactnative and Javascript and I am trying to cache the data from APi and get it. But it is not working. I could not render the data. I am getting the error. How can I cache and retrieve data from cache when there is no internent? I have implemented the code for caching as follows:

export default class ViewpagerP extends Component {
constructor(props) {
    super(props);
    this.state = { isLoading: true, data: [] }
}
async componentDidMount() {
    const photoStorage = await AsyncStorage.getItem('GalleryPhotos')
            console.log(photoStorage);
    if(!photoStorage) {
      try {
        console.log("Null inside")
        const photoResp = await axios.get('https://rallycoding.herokuapp.com/api/music_albums')
        console.log(photoResp)
        const photoData = await JSON.stringify(photoResp.data);
        this.setState({data:photoResp,isLoading:false})
        await AsyncStorage.setItem('GalleryPhotos', photoData);
      } catch(e) {
        console.warn("fetch Error: ", error)
     }
   then(response => this.setState({ data: response.data,isLoading:false }))
   }else{
       this.getPhotos;
   }
 }
 getPhotos = async()=> {
    try {
        data = JSON.parse(await AsyncStorage.getItem('GalleryPhotos'));
        this.setState({data:data,isLoading:false})
        console.log(data);
    }
    catch (error) {
      console.error(error);
    }
  }

render() {

    if (this.state.isLoading) {
        return (
            <View style={{ flex: 1, padding: 20 }}>
                <ActivityIndicator />
            </View>
        )
    }

    console.log(this.state.data);

    return (
        <View style={styles.container}>
            <ImageSlider style={styles.viewPagerStyle}
                loopBothSides
                autoPlayWithInterval={6000}
                images={this.state.data}
                customSlide={({ index, item, style, width }) => (
                    <View key={index} style={[style, styles.customSlideStyle]}>
                        <View style={styles.contentContainer}>
                            <Image source={{ uri: item.image }} style={styles.customImage} />
                            <View style={styles.textContainerStyle}>
                                <Text style={styles.textStyle}>{item.title}</Text>
                            </View>
                        </View>
                    </View>
                )
                }

            />

        </View>
    );
}
}

推荐答案

您需要对代码进行一些更正

  this.getPhotos;

到

this.getPhotos();

您也可以使用

import { NetInfo} from 'react-native';

检查下面的文章它会帮助你在此处输入链接描述

Check the below artical it will help you enter link description here

这里来修正

 export default class ViewpagerP extends Component {
constructor(props) {
    super(props);
    this.state = { isLoading: true, data: [] }
}
async componentDidMount() {
    const photoStorage = await AsyncStorage.getItem('GalleryPhotos')
            console.log(photoStorage);
    if(!photoStorage) {
      try {
        console.log("Null inside")
        const photoResp = await axios.get('https://rallycoding.herokuapp.com/api/music_albums')
        console.log(photoResp)
        const photoData = await JSON.stringify(photoResp.data);
        this.setState({data:photoResp,isLoading:false})
        await AsyncStorage.setItem('GalleryPhotos', photoData);
      } catch(e) {
        console.warn("fetch Error: ", error)
     }
   }else{
       this.getPhotos();
   }
 }
 getPhotos = async()=> {
    try {
        data = JSON.parse(await AsyncStorage.getItem('GalleryPhotos'));
        this.setState({data:data,isLoading:false})
        console.log(data);
    }
    catch (error) {
      console.error(error);
    }
  }

render() {

    if (this.state.isLoading) {
        return (
            <View style={{ flex: 1, padding: 20 }}>
                <ActivityIndicator />
            </View>
        )
    }

    console.log(this.state.data);

    return (
        <View style={styles.container}>
            <ImageSlider style={styles.viewPagerStyle}
                loopBothSides
                autoPlayWithInterval={6000}
                images={this.state.data}
                customSlide={({ index, item, style, width }) => (
                    <View key={index} style={[style, styles.customSlideStyle]}>
                        <View style={styles.contentContainer}>
                            <Image source={{ uri: item.image }} style={styles.customImage} />
                            <View style={styles.textContainerStyle}>
                                <Text style={styles.textStyle}>{item.title}</Text>
                            </View>
                        </View>
                    </View>
                )
                }

            />

        </View>
    );
}
}

这篇关于如何缓存数据并在反应中获取?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！