当状态最初发生变化时，无法使用产品设置本地存储答案

【问题标题】：unable to set localstorage with product as the state initially changes当状态最初发生变化时，无法使用产品设置本地存储
【发布时间】：2021-09-01 15:34:38
【问题描述】：

我正在从事电子商务项目，我目前面临一个问题，即当用户单击添加到购物车按钮时，代码 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 在第一次点击添加到购物车时会提供 [] 数组

【问题讨论】：

setCard 不会立即执行，因此在调用 localStorage 时您的卡仍然是空的，只需将 ([cart, ...item]) 放入对 localStorage 的调用中即可。
@NicolasMenettrier 非常感谢 :)

标签： reactjs mern

【解决方案1】：

当您的代码有副作用时（当您操作本地存储时就是这种情况），您应该使用 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]);

【讨论】：

【解决方案2】：

这是因为 useState 钩子是异步的。

尝试使用现有的购物车并像这样附加商品（作为参数出现）：

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

【讨论】：

【解决方案3】：

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

【讨论】：