首次运行应用程序时,对本地异步获取数据做出反应

时间:2019-06-07 13:13:10

标签: react-native asyncstorage

我有两个组件,第一个组件在asyncstorage中存储数据,第二个组件显示数据,当安装应用程序并保存数据时,从异步存储中获取数据,而第二次显示打开的应用程序数据。

storeData = async (item, messave, messrem) => {
    const checkarary = this.state.favorite;
    if(checkarary.some(e => e.name === item.name)) {
        const value = this.state.favorite;
        const position = value.filter((lists) => lists.id !== item.id);
        this.setState({
            favorite: position
        }, () => {
            try {
                AsyncStorage.setItem('favoriti', JSON.stringify(this.state.favorite), () => {
                    Toast.show({
                        text: messrem,
                        buttonText: "Okay",
                        duration: 3000,
                        type: "danger"
                    });                  
                });
            } catch (error) {
            }
        });    
    } else {
        this.setState({
            favorite: [...this.state.favorite, item]
        }, () => {
            try {
                AsyncStorage.setItem('favoriti', JSON.stringify(this.state.favorite), () => {
                    // AsyncStorage.getItem('favoriti', (err, result) => {
                    //     console.log(result);
                    // });
                    Toast.show({
                        text: messave,
                        buttonText: "Okay",
                        duration: 3000,
                        type: "success"
                    });
                });
            } catch (error) {
            }
        }); 

    } 
};

在第二部分中获取数据

 _retrieveData = async () => {
try {
  AsyncStorage.getItem('favoriti').then((value) => {
    const parsed = JSON.parse(value);
    this.setState({ favorite: parsed })
  })
} catch (error) {
}
};

componentDidMount() {
 this._retrieveData();
 setTimeout(() => {
  this.setState({
    loading: false,
  })
 }, 2000)
};

componentDidUpdate() {
   this._retrieveData();
};

如何解决此问题,是否有解决方案。安装应用程序或其他东西时,我可以设置Item并重新加载应用程序吗?

1 个答案:

答案 0 :(得分:0)

使用此

componentWillMount() {
 this._retrieveData();
 setTimeout(() => {
  this.setState({
    loading: false,
  })
 }, 2000)
};

代替

componentDidMount() {
 this._retrieveData();
 setTimeout(() => {
  this.setState({
    loading: false,
  })
 }, 2000)
};

当类被调用构造函数后,将调用componentWillMount,一旦屏幕呈现后,将调用componentDidMount。