При клике пропадает запись из local storage

Question

При клике пропадает запись из local storage

Рейтинг: 0Ответов: 1Опубликовано: 10.04.2023

При нажатии на кнопку (иконку) в local storage добавляется объект(игра добавляется в список избранного на отдельной странице). Мне необходимо реализовать функцию что при повторном нажатии объект удалялся из local storage и не отображался в списке избранного. У меня проблема в том что при добавлении функции removeGame после нажатия обьект отображается на долю секунды и изчезает

export const Card = (props) => {
 //const {data} = props
  const heandelClick = () => {
    let gamesList = JSON.parse(localStorage.getItem("myFavoritGame")) || {};
    gamesList[props.data.id] = props.data;
    localStorage.setItem("myFavoritGame", JSON.stringify(gamesList));
    removeGame(props.data.id);
  }

  const removeGame = () => {
    let gamesList = JSON.parse(localStorage.getItem("myFavoritGame")); 
  gamesList[props.data.id] = undefined;
    localStorage.setItem("myFavoritGame", JSON.stringify(gamesList)); 
  }

  return (
    <div className='item'>
      <h1 className='item_title'>{props.data.title}</h1>
      <img className='item_image' src={props.data.thumbnail} alt="Картинка"></img>
      <p className='item_text'>Разработчик: {props.data.developer}</p>
      <p className='item_text'>Жанр игры: {props.data.genre}</p>
      <p className='item_text'>Платформа: {props.data.platform}</p>
      <p className='item_text'>Дата выхода: {props.data.release_date}</p>
      <button className='wishList_button' onClick={heandelClick}><IconHeart color="red" /></button>

    </div>
  )

}

reactjs localstorage

Источник: Stack Overflow на русском

Answer 1

▲ 1

Дело в том, что после нажатия на кнопку, у вас всегда выполняются оба действия - и добавление и удаление.

Можно переписать hadleClick(), например, вот таким образом:

    const heandelClick = () => {
      let gamesList = JSON.parse(localStorage.getItem("myFavoritGame")) || {}; 
      
      // если игра уже в избранном, то удаляем ее оттуда
      if(gamesList[props.data.id] !== undefined){
        console.log('remove')
        gamesList[props.data.id] = undefined;


      // если нет, то добавляем в избранное
      }else{
        console.log('add')
        gamesList[props.data.id] = props.data;
      }
      
      localStorage.setItem("myFavoritGame", JSON.stringify(gamesList)); 
    }

При клике пропадает запись из local storage

Ответы