状态(useState)在页面刷新时不持久 反应钩子反应引导

Question

>我在父应用程序中从导航栏中设置了一段状态，然后将其传递给子组件。状态在单击时传入，然后当我刷新页面时不再设置。

应用(设置状态的父级(

const [brand, setBrand] = useState("");
const brandSet = (value) => {
setBrand(value);
};
return (
<div>
<NavBar
login={login}
logout={logout}
auth={auth}
createAccount={createAccount}
brandSet={brandSet}
/>
<Route
path="/products:brand"
render={() => (
<BrandProducts
products={products}
productVariants={productVariants}
brand={brand}
addToCart={addToCart}
brandSet={brandSet}
/>
)}
/>

导航栏

const NavBar = ({ logout, login, auth, createAccount, brandSet }) => {
return (
<div>
{auth.id ? (
<Navbar bg="light" expand="lg">
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="/#/about">About Us</Nav.Link>
<NavDropdown title="Brands" id="basic-nav-dropdown">
<NavDropdown.Item href="/#/products">
All Products
</NavDropdown.Item>
<NavDropdown.Item
href="/#/products:PoloRalphLauren"
onClick={() => brandSet("Polo Ralph Lauren")}
>
Polo Ralph Lauren
</NavDropdown.Item>
<NavDropdown.Item
href="/#/products:TommyHilfiger"
onClick={() => brandSet("Tommy Hilfiger")}
> 
Tommy Hilfiger
</NavDropdown.Item>

品牌产品(查看(

const BrandProducts = ({ products, productVariants, addToCart, brand }) => {
const brandProds = products.filter((product) => {
return product.brand === brand;
});
return (
<Container className="mt-5">
<Row>
<h2>All {brand}</h2>
</Row>
<Row>
{brandProds.map((product) => {
return (
<Col md={3} className="list-unstyled" key={product.id}>
<Product
key={product.id}
product={product}
addToCart={addToCart}
productVariants={productVariants}
/>
</Col>
);
})}
</Row>
</Container>
);
};

不持久的状态是brandBrandProducts提前感谢您的帮助！

Answer 1

默认情况下，页面刷新时状态不会保留。您可以实现自己的缓存解决方案，也可以使用现有的缓存解决方案，例如 https://www.npmjs.com/package/use-persisted-state