我试图在本地存储中存储点赞，但它对我不起作用

Question

如前所述，我正在使用本地存储来保存我的购物车以及以前喜欢的照片。它适用于购物车商品，但不会保存对“喜欢”的照片的更新。我在这里做错了什么？

我已经尝试了很多事情，包括拆分 useeffects 和管理它们的依赖数组，但无济于事。当我检查应用程序标签时，它成功地更新了单张照片的 isfavorite 值，但是一旦刷新它就会恢复到默认值。

import React,{ useState,useEffect } from "react";
const Context = React.createContext()

function ContextProvider(props){
    const [allPhotos, setAllPhotos] = useState([])
    const [cartItems, setCartItems] = useState([])
    const url = "https://raw.githubusercontent.com/bobziroll/scrimba-react-bootcamp-images/master/images.json"
    useEffect(() => {
      fetch(url)
      .then(res=>res.json())
      .then(data => setAllPhotos(data))
    }, [])


    const toggleFavorites = (id) =>{
        const updatedArray = allPhotos.map(photo=> {
            if (photo.id === id){
                return {...photo, isFavorite: !photo.isFavorite}
            } return photo
        })
        setAllPhotos(updatedArray)
    }

    const addItem = (newItem) => {
        setCartItems(prevItems=>([...prevItems,newItem]))
    }

    const removeItem = (id) => {
        setCartItems(prevItems=>(prevItems.filter(item=>item.id !== id)))
    }

    function emptyCart(){
        setCartItems([])
    }

    useEffect(()=> {
        const cartData = window.localStorage.getItem("CART_SETTINGS")
        if (cartData !== null) setCartItems(JSON.parse(cartData))
    },[])

    useEffect(()=> {
        const photoData = window.localStorage.getItem("PHOTO_SETTINGS")
        if (photoData !== null) setAllPhotos(JSON.parse(photoData))
    },[])


    useEffect(()=> {
        window.localStorage.setItem(`PHOTO_SETTINGS`, JSON.stringify(allPhotos))
        window.localStorage.setItem(`CART_SETTINGS`, JSON.stringify(cartItems))
    },[allPhotos, cartItems])

    
    return (
        <Context.Provider value={{
            allPhotos, 
        toggleFavorites,
        cartItems, 
        addItem,
        removeItem, 
        emptyCart}}>
            {props.children}
        </Context.Provider>
    )
}

export {ContextProvider, Context}

Answer 1

您的问题是，您仅在安装组件时将 allPhotos 状态保存到本地存储一次。然后，您根据从获取请求中获得的数据设置 allPhotos。但是，当您切换收藏夹时，您并没有更新本地存储。

这是因为将 allPhotos 和 cartItems 保存到本地存储的 useEffect 挂钩仅在初始渲染时以及 allPhotos 和 cartItems 更改时运行。但是，您在初始渲染后使用 toggleFavorites 内的 setAllPhotos 更新 allPhotos，并且您没有将此更新状态保存到本地存储。

以下是您可以修改 toggleFavorites 以在切换收藏夹后将 allPhotos 状态保存到本地存储的方法：

const toggleFavorites = (id) => {
    const updatedArray = allPhotos.map(photo => {
        if (photo.id === id){
            return {...photo, isFavorite: !photo.isFavorite}
        } 
        return photo
    })
    setAllPhotos(updatedArray)

    // Save to local storage
    window.localStorage.setItem(`PHOTO_SETTINGS`, JSON.stringify(updatedArray))
}

现在，只要您切换收藏夹，更新的 allPhotos 状态将保存到本地存储，并且它将在页面重新加载时持续存在。

注意：考虑处理与localStorage相关的操作的潜在异常，以获得更好的用户体验和数据可靠性。浏览器可能会限制它的使用（例如在某些浏览器中处于隐身模式，或者当它被手动禁用时），并且 localStorage 操作可能会抛出错误。