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

问题描述

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

应用程序（设置状态的父级）

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

不坚持的状态是brand在此BrandProducts先感谢您的帮助！

标签： javascriptreact-hooksreact-bootstrapuse-effectuse-state

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

问题描述

解决方案

推荐阅读