Как добавить значение счётчика в localStorage в React

Question

Я создаю конструктор Бургера. Отрендерила ингредиенты через map. Теперь хочу чтобы при переключении вкладок (использую реакт роутер) значение счётчика на каждом элементе сохранялось.
Мой код работает НО, изменяет значение на всех ингредиентах одновременно. Что я делаю не так? Это мой первый проект на реакт.

Разметка:
return (
      <div className="ingredients">
        <div className="ingr-card">
            <div className="image-ingr">
              <img src={image} alt="cotlet" /> 
            </div>
            <div className="name-ingr">
              <p>{name}</p>
            </div>
            <div className="counter">
              <button disabled={!count} onClick={minus}>-</button>
              <p>{count}</p>
              <button disabled={count>=3} onClick={plus}>+</button>
            </div>
      </div>
      </div>
  );
}


Добавляю в localStorage:
const getFromStorage = () => { // получить значение из localStorage
    const storage = window.localStorage.getItem('storageCountValue');
    return storage !== null ? parseInt(storage) : 0;
    };
    const [count, setCount] = React.useState(getFromStorage);
    useEffect(
        () => window.localStorage.setItem('storageCountValue', count),
        [count]
    );



  const plus = () => {
    setCount(count => count + 1); }

Answer 1

Дело в том, что в localStorage, каждый ингредиент у вас присваивается к одному и тому же ключу storageCountValue. Существует множество решений такой проблемы.

Вот моё предложение. Создать ключ с названием burgerSettings и в нём хранить данные такого вида(в формате JSON):

{
  cutlet:number,
  mayo:number,
  onion:number,
  tomato:number,
  ...
}

БЛОГ НА HUSL

Как добавить значение счётчика в localStorage в React

Ответы (1 шт):