状态（useState）不会在页面刷新时持续存在 react-hooks react-bootstrap答案

【问题标题】：State (useState) not persisting on page refresh react-hooks react-bootstrap状态（useState）不会在页面刷新时持续存在 react-hooks react-bootstrap
【发布时间】：2020-06-24 21:44:59
【问题描述】：

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

App（设置状态的父级）

  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>
  );
};

不存在的状态是BrandProducts 中的brand 提前感谢您的帮助！

【问题讨论】：

标签： javascript react-hooks react-bootstrap use-effect use-state

【解决方案1】：

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

【讨论】：