Загрузка...

React.js Error getting array with LocalStorage

Thread in Frontend created by SleGka Jan 21, 2025. 722 views

  1. SleGka
    SleGka Topic starter Jan 21, 2025 Облизываю SUPERCELL 81 Dec 2, 2023
    После добавления "рецепта", в localStorage добавляется "объект", а не "массив", и после добавления следующих рецептов, объект в localStorage обновляется, а должно быть "массивом" и копиться, что стоит переделать?

    App.jsx:

    JS
    import { useState } from 'react'
    import './App.css'
    import { AddRecipe } from './AddRecipe'
    import { RecipeList } from './RecipeList'

    function App() {
    const [recipes, setRecipes] = useState(localStorage.getItem('recipes') ? JSON.parse(localStorage.getItem('recipes')) : []);

    const setRecipesWithSave = (newRecipes) => {
    setRecipes(newRecipes);
    localStorage.setItem('recipes', JSON.stringify(newRecipes))
    }

    const addRecipe = (recipe) => {
    setRecipesWithSave([...recipes, recipe])
    }

    const removeRecipe = (recipeId) => {
    setRecipesWithSave(recipes => recipes.filter(item => item.id !== recipeId))
    }

    return (
    <>
    <AddRecipe addRecipe={addRecipe}/>
    <RecipeList recipes={recipes} removeRecipe={removeRecipe}/>
    </>
    )
    }

    export default App
    RecipeList.jsx:

    JS
    import { RecipeItem } from "./RecipeItem"
    import './RecipeList.css'

    export const RecipeList = ({ recipes, removeRecipe }) => {
    return (
    <div>
    <h2>Список добавленных рецептов</h2>
    <ul className="recipeList">
    {recipes.map(recipeItem => (
    <RecipeItem key={recipeItem.id} recipeItem={recipeItem} removeRecipe={removeRecipe}/>
    ))}
    </ul>
    </div>
    )
    }
    Результат после добавления рецепта:
    [IMG]
     
  2. Y4sperMaglot
    Y4sperMaglot Jan 21, 2025 Кретин 7,345 Sep 8, 2021
    попробуй в консоли localStorage.clear() и еще раз добавь рецепт
    вообще на этом моменте
    JS
    setRecipesWithSave([...recipes, recipe])
    должна ошибка вылетать, если у тебя в recipes объект изначально
     
    1. SleGka Topic starter
      avatarY4sperMaglot, Да, я так делал, но при обновлении выдает ошибку, суть в том что у меня этот рецепт добавляется как просто объект, а нужно чтобы этот объект добавлялся в массив, который и будет в ocalstorage,
  3. rus0xygen
    rus0xygen Jan 29, 2025 1 Jul 11, 2020
    В useEffect занеси localStorage.setItem и в зависимостях укажи [recipes].
     
  4. euorphans
    Все дожно работать и без useEffect, который советует гений сверху)
    [IMG]
     
Loading...