ReactJS如何在刷新页面时维护State值

Posted 2023-02-21

【中文标题】ReactJS如何在刷新页面时维护State值

【英文标题】：ReactJS how to maintain State value when refreshing page

【发布时间】：2021-03-21 16:43:47

【问题描述】：

我试图在重新加载页面时不丢失我的state 值，即cart。我可以在任何页面上将任何product添加到我的cart，但是每当我重新加载页面时cartstate 会自行重置。不管有没有使用更多的库，有没有办法防止这种情况发生？我不知道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
                  
                  src="https://dl.airtable.com/.attachmentThumbnails/5ebc46a9e31a09cbc6078190ab035abc/8480b064"
                  
                />
                <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>
  );

【问题讨论】：

您可以使用多种东西，例如 Redux、Context、MobX，或者您可以将购物车数据存储在本地存储中，但您的状态有一些支持，因为刷新时所有数据都会丢失.. 最简单的方法是本地存储

虽然您可以使用 localstorage，但我建议您仅在真正需要时谨慎使用类似的东西，并且让您的组件在刷新时重新获取数据是可能的。您会遇到更少的问题，尤其是在需要时无法获取过时数据

【参考方案1】：

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

【参考方案2】：

数据必须以某种方式持续存在 - 这意味着您必须将其实际保存在某个地方。

您可以在客户端使用 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

【讨论】：

我检查了文档但无法更新localStorage。你能帮忙吗？

你试过useEffect吗？