无法在状态最初更改时使用产品设置本地存储

Question

我正在从事电子商务项目，我目前面临一个问题，当用户点击添加到购物车按钮时，代码 setCart([...cart,item])运行是因为购物车的初始状态是空数组，如 const [cart,setCart] = useState([]) 因此当我尝试将其保存在 localstorage 它给了我空数组，然后开始在第二个数组中保存数据

代码：

  const [cartValue,setCartValue] = useState(0)
   
  const [cart,setCart] = useState([])


  const cartValueIncreaserandSetter = (item) =>{

    setCart([...cart,item])
  setCartValue(cartValue+1)
localStorage.setItem("items",JSON.stringify(cart))

  }

我希望 localstorage 立即保存添加的第一个项目，但 localstorage 在第一次点击添加到购物车时给出 [] 数组

Answer 1

发生这种情况是因为 useState 挂钩是异步的。

尝试使用现有的购物车并附加商品（作为参数），如下所示：

localStorage.setItem("items",JSON.stringify([...cart,item]))

Answer 2

当你的代码有副作用时（当你操作本地存储时就是这种情况）你应该使用 useEffect 钩子。

我建议你像这样重写你的代码：

const [cartValue,setCartValue] = useState(0)
const [cart,setCart] = useState([])

const cartValueIncreaserandSetter = (item) => {
  setCart([...cart, item])
  setCartValue(cartValue+1)
}

useEffect(() => {
  localStorage.setItem("items",JSON.stringify(cart))
}, [cart]);

Answer 3

useEffect(() => {
  if (cart.length > 0) localStorage.setItem("items", JSON.stringify(cart));
}, [cart]);

无法在状态最初更改时使用产品设置本地存储

unable to set localstorage with product as the state initially changes

reactjs

mern