在React useStateValue()中实现本地存储

Question

我希望能够将从主页中选择的项目存储在本地存储中，因为我使用的是useStateValue()。

项目正确显示在"签出"页面上，但是，在刷新时，"签出》页面变为空并返回零。下面的代码适用于普通的useState。我不知道使用useStateValue()时缺少了什么。

我的代码：

import React from "react";
import "./Checkout.css";
import CheckoutProduct from "./CheckoutProduct";
import { useStateValue } from "./StateProvider";
import Subtotal from "./Subtotal";
function Checkout() {
const [{ basket, user }, dispatch] = useStateValue();
React.useEffect(() => {
const data = localStorage.getItem("my-cart-list");
if (data) {
dispatch(JSON.parse(data))
}
}, []);
React.useEffect(() => {
localStorage.setItem("my-cart-list", JSON.stringify(basket))
});

Answer 1

您忘记了依赖数组，这意味着setItem将在每次渲染时调用：

React.useEffect(() => {
localStorage.setItem("my-cart-list", JSON.stringify(basket))
});

如果您想在"篮子"；更改，您应该使用：

React.useEffect(() => {
localStorage.setItem("my-cart-list", JSON.stringify(basket))
}, [basket]);