How to cache data and fetch in reactnative?

问题

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

回答1:

You need some correction in code

  this.getPhotos;

to

this.getPhotos();

And also you can check internate is on off by using

import { NetInfo} from 'react-native';

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

here is come correction

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

来源：https://stackoverflow.com/questions/59280976/how-to-cache-data-and-fetch-in-reactnative