ReactJS如何在刷新页面时保持State值

Question

重新加载页面时，我尽量不丢失state值，即cart。我可以在任何页面将任何product添加到我的cart，但每当我重新加载页面时，cart状态就会自行重置。不管是否使用更多的库，有没有办法防止这种情况发生？我不知道Redux是否是防止这种情况发生的唯一方法。

我的App功能：

function App() {
const [cart, setCart] = useState([]);
return (
<div>
<Router>
<NavbarComponent cart = {cart} setCart={setCart}></NavbarComponent>
<Switch>
<Route exact path="/">
<Home cart = {cart} setCart={setCart} />
</Route>
<Route exact path="/home">
<Home cart = {cart} setCart={setCart} />
</Route>
<Route exact path="/Products">
<Products cart = {cart} setCart={setCart} />
</Route>
<Route exact path="/Detail/:product_id">
<Detail cart = {cart} setCart={setCart} ></Detail>
</Route>
</Switch>
</Router>
</div>
);
}

下面这只是我可以更改cart状态值的组件之一。

export function CardComponent(props) {
const { cart, products, setCart } = props;
//const products = props.products;
const addToCart = (product) => {

let tempCart = [...cart]
tempCart.push(product); 
setCart(tempCart)
console.log(cart);
};
return (
<div className="container cards">
<div className="featured">
Featured Products
{cart.length}
<div className="featured-underline"></div>
</div>
<CardColumns>
{products.map((product, index) => {
if (product.is_featured)
return (
<Card key={index}>
<CardImg
top
width="100%"
src="https://dl.airtable.com/.attachmentThumbnails/5ebc46a9e31a09cbc6078190ab035abc/8480b064"
alt="Card image cap"
/>
<CardBody>
<CardTitle tag="h5">{product.name}</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
Card subtitle
</CardSubtitle>
<CardText>{product.description}</CardText>
<Button onClick={() => addToCart(product)} color="primary">
Add to cart
</Button>
<Button color="info ml-2">Detail</Button>
<p style={{ float: "right", color: "brown" }}>
${product.price}
</p>
</CardBody>
</Card>
);
else return;
})}
</CardColumns>
</div>
);
}

Answer 1

数据必须以某种方式持久存在，这意味着您必须将其保存在某个地方。

您可以使用客户端上的localStorage。然后只要确保在购物车更改时更新它。

类似于：

const [cart, setCart] = useState(localStorage.getItem('cart'));
useEffect(()=>{
localStorage.setItem('cart', cart)
},[cart]);

文档：

• https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
• https://reactjs.org/docs/hooks-effect.html

Answer 2

如果您使用Redux，请使用Redux-Persist，或者在组件安装时从localStorage加载数据，并在组件卸载时将其保存到localStorage

Answer 3

刷新页面时，它肯定会开始重新渲染，并且状态会丢失。因此，将其保存到本地变量中，然后将其添加到卡组件中。

Answer 4

您应该在代码localStorage中使用。因为刷新页面时，您的状态为空，但本地存储会存储数据。

useEffect(() => {
let newCartData = localStorage.getItem("Product")
if (newCartData === []) {
return []
}
else {
return JSON.parse(newCartData)
}
}, [])
const addToCart = (product) => {
localStorage.setItem("Product", JSON.stringify(product))
}

Answer 5

刷新页面时，您将失去当前状态，即页面未存储在其他位置，因此必须首先将其存储在某个位置。要存储状态，您可以直接将其存储在localStorage中，也可以使用redux工具包。在我看来，redux工具包是最好的选择。

你需要安装redux工具包，然后根据你的使用创建切片和存储，这非常灵活，可以在需要时重用和清空状态。