React中如何将cart数组state存储到LocalStorage

你的自定义useLocalStorageHook内置了JSON.stringify/JSON.parse序列化逻辑，原生支持数组、对象等复杂类型存储，无需修改Hook源码，直接参照已实现的favCounter逻辑接入即可。

修改步骤 #

• 新增cart的本地存储绑定
  在useInitialState中参照favCounter的绑定方式，新增cart对应的localStorage读写实例，同时修正favCounter初始值的类型错误（原代码初始值传了布尔值false，计数类型初始值应为0，否则计算时易出现NaN问题）：

  const [inc, setInc] = useLocalStorage("favCounter", 0)
  // 新增cart绑定，初始值为空数组
  const [storedCart, setStoredCart] = useLocalStorage("cart", [])
  

• 替换cart初始值
  将initialState中cart的硬编码空数组替换为从本地存储读取到的storedCart，实现页面刷新后初始值自动读取本地缓存：

  const initialState = {
    favCounter: inc,
    cart: storedCart
  }
  

• 更新addToCart方法，同步写入本地存储
  每次更新cart状态时，同步调用setStoredCart将最新cart值写入localStorage，和favCounter的更新逻辑保持一致：

  const addToCart = (payload) => {
    const newCart = [...state.cart, payload]
    setState({
      ...state,
      cart: newCart
    })
    // 同步持久化到本地
    setStoredCart(newCart)
  }
  

完整修改后的useInitialState代码 #

import { useState } from "react"
import { useLocalStorage } from "./useLocalStorage"

const useInitialState = () => {
  const [inc, setInc] = useLocalStorage("favCounter", 0)
  const [storedCart, setStoredCart] = useLocalStorage("cart", [])

  const initialState = {
    favCounter: inc,
    cart: storedCart
  }
  
  const [state, setState] = useState(initialState)
  
  
  const incrementFav = () => {
    const newCount = state.favCounter + 1
    setState({
      ...state,
      favCounter: newCount
    })
    setInc(newCount)
  }

  const decrementFav = () => {
    const newCount = state.favCounter - 1
    setState({
      ...state,
      favCounter: newCount
    })
    setInc(newCount)
  }

  const addToCart = (payload) => {
    const newCart = [...state.cart, payload]
    setState({
      ...state,
      cart: newCart
    })
    setStoredCart(newCart)
  }
  

  return {
    state,
    incrementFav,
    decrementFav,
    addToCart
  }
}

export default useInitialState

后续如果新增删除购物车商品、清空购物车等操作，只需要在更新state中cart值的同时，调用setStoredCart传入最新的cart数组即可完成持久化。

内容的提问来源于stack exchange，提问作者alejandro