如何使用AsyncStorage React Native将一条记录存储到现有阵列中

Question

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

我尝试做的事情：

1. 从api获取项目数组并将其呈现为Flatlist。
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;
  };

我肯定做错了，但是我不明白。预先感谢！

Answer 1

使用下面的代码。

<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>
        )
    }}
/>

Answer 2

我找到了解决方案。

是：

const addItem = (item) => {
   setMyItems([...myItems, item]);
   storeData();
};

已修改：

const addItem = (item) => {
   myItems.push(item); // <- Here is the trick
   storeData();
   setMyContacts([...myItems]);
};

1. 当我仅设置setMyContacts(myItems)时，屏幕上的列表不会更新。
2. 当我设置为setMyContacts([...myItems , item])时，一个项目会重复出现，并在屏幕上显示两次。正确的是setMyContacts([...myItems])。