React电商项目首次点击加购localStorage存储为空数组问题

问题根因 #

React 中 useState 返回的状态更新函数是异步批量执行的，调用 setCart 后当前函数作用域内的 cart 变量还是本次渲染对应的旧值，并不会立即变成更新后的值。所以你首次调用 localStorage.setItem 时拿到的还是初始的空数组，第二次点击时拿到的才是第一次更新后的 cart 值，才会正常存储。

解决方案 #

方案1：直接用更新后的新值写入 localStorage #

你可以先生成最终要更新的购物车数组，直接用这个新数组写入 localStorage，不需要依赖当前的旧状态：

const cartValueIncreaserandSetter = (item) => {
  const newCart = [...cart, item]
  const newCartValue = cartValue + 1
  setCart(newCart)
  setCartValue(newCartValue)
  // 直接使用新生成的数组存储，避免依赖旧状态
  localStorage.setItem("items", JSON.stringify(newCart))
}

方案2（更推荐）：通过 useEffect 监听状态变化自动同步 #

这种方式不管你在业务代码的任何位置修改了 cart 状态，都会自动同步到 localStorage，不会出现遗漏同步的问题，也不需要在每个修改 cart 的地方重复写存储逻辑：

import { useState, useEffect } from 'react'

// 省略其他组件逻辑
const [cart, setCart] = useState([])
const [cartValue, setCartValue] = useState(0)

// 监听cart变化，自动同步到localStorage，同时更新购物车数量
useEffect(() => {
  localStorage.setItem("items", JSON.stringify(cart))
  setCartValue(cart.length)
}, [cart])

const cartValueIncreaserandSetter = (item) => {
  // 函数式更新可以避免连续点击时的闭包问题，更稳妥
  setCart(prevCart => [...prevCart, item])
}

补充优化

初始化状态时可以直接从 localStorage 读取已存储的购物车数据，刷新页面后数据不会丢失：

const [cart, setCart] = useState(() => {
  const savedCart = localStorage.getItem("items")
  return savedCart ? JSON.parse(savedCart) : []
})

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