如何在FlatList中接收AsyncStorage項目？

Question

我要做的是在FlatList中顯示保存在AsyncStorage中的項目。

savePosts = async () => {
try {
    let post = {
        postId: '1',
        postTitle: 'This is an example',
    }
    const posts = await AsyncStorage.getItem('posts') || '[]';
    posts = JSON.parse(posts);
    posts.push(post);
    AsyncStorage.setItem('posts', JSON.stringify(posts)).then(() => {
    });
} catch(error) {
}
};

Answer 1

您可以使用state並在componentDidMount對其進行初始化：

state = {
  data: [],
}

componentDidMount() {
  AsyncStorage.getItem('posts').then(data => this.setState({ data }));
}

<FlatList data={this.state.data} ...otherProps />

另外，如果您使用Redux，則可以在任何地方調用AsyncStorage.getItem並調度一個操作來填充商店， FlatList組件可以連接到該商店並顯示數據。