如何缓存数据并在本机反应中获取？

Question

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

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

Answer 1

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

  this.getPhotos;

到

this.getPhotos();

您还可以使用

来检查 internate 是否打开

import { NetInfo} from 'react-native';

查看以下文章，它会对您有所帮助 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>
    );
}
}