React Native 将数据添加到异步存储答案

【问题标题】：React Native add data to Async StorageReact Native 将数据添加到异步存储
【发布时间】：2021-05-14 15:15:44
【问题描述】：

我正在开发关于旅行的应用程序，所以我有一张包含旅行地点的地图，我想实现添加到收藏夹功能。当用户单击地图上的标记时，我向他显示模式窗口，其中包含有关该地点的所有信息，并且在那里我有图标按钮“添加到收藏夹”。当用户单击此“添加到收藏夹”图标按钮时，我想将该位置保存到 AsyncStorage，将图标重新呈现为“从收藏夹中删除”，然后如果该位置在收藏夹中并且用户单击“删除-从-收藏夹”然后从 AsyncStorage 中删除位置并重新呈现添加到收藏夹的图标。我真的不明白如何在功能组件中以正确的方式做到这一点。请给我一个例子。

我尝试了什么：

我的模态窗口代码：

const [favourite, setFavourite] = useState(false); 
const onHeartPress = async () => {
        setFavourite(prev => !prev);
        await storage.save({
            key: 'markers',
            data: {
                marker: marker
            },
            expires: null
        })

<TouchableOpacity onPress={() => onHeartPress()}>
                <View style={{flexDirection: "row", alignItems: "center"}}>
                    {favourite ? <Ionicons size={height/20} name={'heart-dislike'} /> : <Ionicons size={height/20} name={'heart'} />}
                </View>
            </TouchableOpacity>

不难理解如何添加到存储然后从存储中加载，但是如何正确呈现图标，如心/不喜欢心，因为现在使用此代码，当我在其他地方的一个地方按下按钮图标时它也发生了变化，因为喜欢变成了真的，所以我想了解如何以正确的方式只为用户点击图标的地方更改图标。

【问题讨论】：

请展示你的尝试！
更新了我的问题

标签： react-native asyncstorage

【解决方案1】：

你可以按照这个代码来实现这个功能：

const STORAGE_KEY = '@icon_name'

// Store data
const saveData = async () => {
try {
   await AsyncStorage.setItem(STORAGE_KEY, age)
   alert('Data successfully saved')
  } catch (e) {
   alert('Failed to save the data to the storage')
 }
}

// fetch data
const readData = async () => {
  try {
    const userAge = await AsyncStorage.getItem(STORAGE_KEY)

    if (userAge !== null) {
      setAge(userAge)
    }
  } catch (e) {
    alert('Failed to fetch the data from storage')
  }
}

//remove data
try {
    await AsyncStorage.removeItem(STORAGE_KEY);
    console.log('Data removed')
}
catch(exception) {
    console.log(exception)
}

【讨论】：