Блог

Я разрабатываю приложение о путешествиях, поэтому у меня есть карта с местами для путешествий, и я хочу реализовать функцию добавления в избранное. Когда пользователь нажимает на маркер на карте, я показываю ему модальное окно со всей информацией о месте, и там у меня есть значок-кнопка «добавить в избранное». Когда пользователь нажал на эту кнопку со значком «добавить в избранное», я хочу сохранить место в хранилище ASYNC, перенаправить значок на «удалить из избранного», затем, если место в избранном, и пользователь нажимает «удалить из избранного», затем удалите место из хранилища ASYNC и повторно отправьте значок добавления в избранное. Я действительно не понимаю, как это правильно сделать в функциональной составляющей. Приведите мне пример, пожалуйста.

Что я пытался:

Мой код модального окна:

 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>


 

Нетрудно понять, как добавить в хранилище, а затем загрузить из хранилища, но как правильно отобразить значок, как сердце/не нравится сердце, потому что теперь с помощью этого кода, когда я нажимаю значок кнопки в одном месте, в других местах он также меняется, потому что избранное становится истинным, поэтому я хочу понять, как правильно изменить значок только для того места, где пользователь нажал на значок.

Вы можете следовать этому коду для достижения этой функциональности:

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