如何在 React Native 中保存 FlatList 中的项目？答案

【问题标题】：How to save items from a FlatList in React Native?如何在 React Native 中保存 FlatList 中的项目？
【发布时间】：2021-07-07 09:09:29
【问题描述】：

我正在开发一个简单的语言学习应用程序，并且正在使用 CardsList 和 CardItem 呈现一个简单的抽认卡列表，以下是组件：

const CardsList = (props) => {
  return (
    <View>
      <FlatList
        data={cards}
        renderItem={({ item }) => (
          <CardItem card={item} />
        )}
      />
    </View>
  );
};

const CardItem = (props) => {
  return (
    <View>
      <Image />
      <SaveButton /
    <View>
  )
};

cards 数据当前正在从单独的 json 文件传入。

我想实现SaveButton 组件的功能，它允许用户复制将显示在另一个页面上的某些卡片，以便他们有一个单独的卡片列表，他们正在努力处理他们想要提供的卡片多练习。

谁能推荐我能解决这个问题的最佳方法？最好先将项目推入新数组吗？我还希望将项目存储到另一页的内存中吗？本地存储是解决此问题的适当方法，还是我需要涉及数据库。闪存卡的列表可能超过 2,500 个。

【问题讨论】：

如果您的应用程序不会上线并且可能不包含大型数据集，那么设备存储是存储数据的最佳且简单的方法。向用户提供应用更新后，您可以在服务器上同步（上传）它。
简而言之，如果数据在服务器上更新并不重要，那么我建议将其存储在设备上，因为它比服务器的 API 调用更快

标签： javascript react-native local-storage react-native-flatlist

【解决方案1】：

显然，API + DB 是处理用户数据的最佳方式。但如果您不想或做不到，您可以将这些数据存储在设备中。

使用AsyncStorage 存储在您的设备中。请注意，该方法只能存储字符串，因此您需要对 JSON 进行字符串化和解析。

存储数据

const favList = [
    {
        id: 0,
        title: "My fav 1"
    }
]

AsyncStorage.setItem('user_fav_list', JSON.stringify(favList))

获取数据

const favList = await AsyncStorage.getItem('user_fav_list')
const userFavList = JSON.parse(favList)

【讨论】：