如何使用 React Native AsyncStorage 将 JS 对象保存在数组中并在 Flatlist 中显示

问题描述

React Native 开发者好！

我一直在尝试使用 react native 在我的字典应用程序中实现书签功能 但是AsyncStorage 有问题。我不知道该怎么做。

数组如下所示：

const [Words,setWords] = useState([
    {name: 'Ab initio',meaning: 'From the beginning.',id: '1' },{name: 'A.R.S',meaning: 'Arizona Revised Statutes,Books containing the laws that the Arizona Legislature has enacted.',id: '2' },{name: 'Abandon. ',meaning: 'To intentionally give up a right or property without any plan of reclaiming it in the future; to desert a spouse or child.',id: '3' },{name: 'Abandonment',meaning: 'Giving up a legal right.',id: '4' },{name: 'Abatable nuisance.',meaning: 'A nuisance that can be reduced.',id: '5' },]);

下面是我的反应原生平面列表，显示列表：

<FlatList
    initialNumToRender={70}
          data={filteredDataSource} 
          numColumns={1}
          keyExtractor={(item) => item.id} 
          renderItem={({ item }) => (
       
            <List >

<ListItem onPress={() => navigation.navigate('Dicpage',item)}>
  <Left>
    <Text numberOfLines={1}  style={{
  fontSize: 18,fontFamily: "Lato-Regular",textTransform: 'capitalize',}}>{item.name}</Text>
  </Left>
  
</ListItem>

</List>

       )}

/>

现在我希望在单击每个项目后使用 asycstorage 保存每个项目。我还想在另一个页面中显示书签项目的列表。

请帮我提供一个示例代码。我会没事的...

解决方法

保存在 AsyncStorage 中

AsyncStorage.setItem("words",JSON.stringify(Words))

从 asyncStorage 获取项目

AsyncStorage.getItem('words',(err,result) => {
   if(result) {
      // get the data from storage and save it to the state that you have given in List
      dataSource = JSON.Parse(result) 
   }
}); 

// 如果 dataSource 不为空则渲染 Lsit

{dataSource && 
<FlatList
    initialNumToRender={70}
          data={dataSource} 
          numColumns={1}
          keyExtractor={(item) => item.id} 
          renderItem={({ item }) => (
       
            <List >

<ListItem onPress={() => navigation.navigate('Dicpage',item)}>
  <Left>
    <Text numberOfLines={1}  style={{
  fontSize: 18,fontFamily: "Lato-Regular",textTransform: 'capitalize',}}>{item.name}</Text>
  </Left>
  
</ListItem>

</List>

}

要在 listItem 上的每个单词上保存一个对象，请单击执行此操作

async setFavouriteWords(item) {

// first check if any word is save or not 
let words = await AsyncStorage.getItem("words")

//If words exist,append list with new item object other wise save new object
if(words) {
    words = JSON.parse(words)
    words = [...words,item]
   await  AsyncStorage.setItem("words",JSON.stringify(words));

 } else {
    await AsyncStorage.setItem("words",JSON.stringify([item]));
  }
 navigation.navigate('Dicpage',item)
}

点击调用这个函数

<ListItem onPress={
 async () => {await this.setFavouriteWords(item)
}>