运行应用程序首次响应本机异步获取数据

Question

我有两个组件，第一个组件将数据存储在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();
};

如何解决这个问题，有什么解决办法吗。我可以在安装应用程序或其他东西时设置项目并重新加载应用程序吗？

Answer 1

使用这个

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

而不是

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

因为 componentWillMount 在为 class 调用构造函数后调用，而 componentDidMount 在屏幕渲染后调用。

运行应用程序首次响应本机异步获取数据

react native async getting data when running app first time

react-native

asyncstorage

运行 应用程序首次响应本机异步获取数据

react native async getting data when running app first time

react-native

asyncstorage

运行应用程序首次响应本机异步获取数据