时间戳

首页 > 解决方案 > 如何使用 AsyncStorage React Native 将一条记录存储到现有数组中

reactjs - 如何使用 AsyncStorage React Native 将一条记录存储到现有数组中

问题描述

我有一个现有的数组 myItems 和项目列表，从 API（数组 itemsFromApi）获取并呈现为平面列表。我想将每个项目（不是项目数组）存储到现有数组中并将其保存在本地。

我试图做的事情：

  1. 从 api 获取项目数组并将其呈现为平面列表。
  2. 将每个项目保存到现有数组 myItems（使用 useState）
  3. 使用 JSON.stringify 和 JSON.parse 通过 AsyncStorage 将数组 myItems 存储为值

是）我有的：

  1. 获取项目并将其存储到数组 myItems 中效果很好。
  2. 在 AsyncStorage 中只存储一个项目，尽管我使用 AsyncStorage 存储一个数组。
  3. 重新渲染数组 myItems 为空后，AsyncStorage 只有一项。

这是和平的代码：

// Array myItems, where i'd like to store the data
const [myItems, setMyItems] = useState([]); 

// Array of data from api
const [itemsFromApi, setItemsFromApi] = useState([]); 

// Fetch items from API and render it as a Flatlist, works good
const getItems = async () => {
   const response = await api.get('/...');
   setItemsFromApi(response.data)
};

<FlatList 
    data={itemsFromApi}
    keyExtractor = { (item, index) => index.toString() }
    renderItem={({ item })=>{
           return (
             <TouchableOpacity>
                 <Text>{item.id}</Text>
                 <Text>{item.title}</Text>
                 <Button title="Add" onPress={()=>{addItem(item))} />
            </TouchableOpacity>
       )
   }}
 />

// Save fetched items to array myItems
const addItem = (item) => {
   setMyItems([...myItems, item]);
   storeData();
};


// trying to store array myItems using AsyncStorage
 const storeData = async (myItems) => {
        try {
          await AsyncStorage.setItem('STORAGE_KEY', JSON.stringify(myItems));
          Alert.alert('Saved', 'Successful');
        } catch (error) {
            Alert.alert('Error', 'There was an error.')
        }
      };

// trying to retrieve data 
const retrieveData = async () => {
  try {
    const value = await AsyncStorage.getItem('STORAGE_KEY');
      if (value !== null) {
            console.log(JSON.parse(value))
        }
      } catch (error) {
            console.log(error)
      }
        return null;
  };

我肯定做错了什么，但我不明白是什么。提前致谢！

标签： reactjsreact-native

解决方案

使用下面的代码。

<FlatList 
    data={itemsFromApi}
    keyExtractor = { (item, index) => index.toString() }
    renderItem={({ item })=>{
        return (
            <TouchableOpacity>
                <Text>{item.id}</Text>
                <Text>{item.title}</Text>
                <Button title="Add" onPress={()=>{setMyItems([...myItems, item]))} />
            </TouchableOpacity>
        )
    }}
/>

推荐阅读