localStorage 在我的应用程序中运行错误

Question

我的应用程序中的 localStorage 有问题。当我将项目添加到“收藏夹”列表时，它们毫无问题地存储在 localStorage 中，甚至可以通过再次单击它们来删除它们。

但是当我刷新页面时，我的应用程序不会读取这些项目在收藏夹列表中，因此不会标记它们。此外，当我将新项目添加到收藏夹列表时，它会导致它从 localStorage 中删除所有内容并重新开始。

这是 localStorage 视图的 gif

这是代码：

import React, { useState, useEffect } from 'react';
import SearchBar from '../../SearchBar/SearchBar.js';
import FiltersBox from '../FiltersBox/FiltersBox.js';
import { getItems } from '../../../Database/Database.js';
import './ItemsContainer.css';

function ItemsContainer() {
    const [items, setItems] = useState([]);
    const [search, setSearch] = useState('');

    const [favoriteItems, setFavoriteItems] = useState([]);
    let localItems = localStorage.getItem('Favorite Items');

    const [sortPrice, setSortPrice] = useState('');
    const [filterCategory, setFilterCategory] = useState('');

    const addItemToFavorites = item => {
        let existentItem = favoriteItems.find(favItem => favItem.id === item.id);

        if (existentItem) {
            let filterTheExistentItem = favoriteItems.filter(
                favItem => item.title !== favItem.title
            );

            setFavoriteItems(filterTheExistentItem);

            let stringItems = JSON.stringify(filterTheExistentItem);
            localStorage.setItem('Favorite Items', stringItems);
        } else {
            setFavoriteItems([...favoriteItems, item]);

            let stringItems = JSON.stringify([...favoriteItems, item]);
            localStorage.setItem('Favorite Items', stringItems);
        }
    };

    const filteredItemsList = () => {
        let newItemList = [];

        newItemList = items.filter(item => {
            if (filterCategory !== '' && filterCategory !== 'none') {
                return item.category === filterCategory;
            } else {
                return item;
            }
        });

        if (sortPrice === 'ascending') {
            return newItemList.sort((a, b) => (a.price > b.price ? 1 : -1));
        } else if (sortPrice === 'descending') {
            return newItemList.sort((a, b) => (b.price > a.price ? 1 : -1));
        } else {
            return newItemList;
        }
    };

    function onSortSelected(sortValue) {
        setSortPrice(sortValue);
    }

    function onCategorySelected(categoryValue) {
        setFilterCategory(categoryValue);
    }

    useEffect(() => {
        getItems().then(res => setItems(res));
    }, []);

    useEffect(() => {
        let xd = JSON.parse(localItems);
        console.log(xd);
    }, [localItems]);

    return (
        <div>
            <SearchBar setSearch={setSearch} />
            <FiltersBox
                items={items}
                setItems={setItems}
                onSortSelected={onSortSelected}
                onCategorySelected={onCategorySelected}
            />
            <div>
                {filteredItemsList()
                    .filter(item =>
                        search.toLowerCase() === ''
                            ? item
                            : item.title.toLowerCase().includes(search)
                    )
                    .map(item => (
                        <div key={item.id}>
                            <div>{item.title}</div>
                            <button
                                className={favoriteItems.includes(item) ? 'si' : 'no'}
                                onClick={() => addItemToFavorites(item)}>
                                Add to favorites
                            </button>
                        </div>
                    ))}
            </div>
        </div>
    );
}

export default ItemsContainer;

在这里，我留下了一个 GIF，其中包含 localStorage 的连续 console.log：

我尝试了一切，但我不知道发生了什么。

Answer 1

您正在检索 localItems 中的项目，并且...您对这个变量不做任何事情。你应该用你的本地存储初始化你的状态favoritesItems

const getItemsFromLocalStorage = () => {
  const items = localStorage.getItem('Favorite Items');
  return items ? JSON.parse(items) : [];
}


const [favoriteItems, setFavoriteItems] = useState(getItemsFromLocalStorage())