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

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

- Ali Ziya ÇEVİK

---

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

虽然你可以使用localstorage，但我建议只在真正需要时才尽可能地使用它，并让你的组件在刷新时重新获取数据。这样做可以避免很多问题，特别是在需要获取过期数据时无法获取的问题。 - andy mccullough

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

- aviya.developer

---

你尝试使用了 useEffect 吗？ - aviya.developer

Answer 2

如果您使用Redux，请使用Redux-Persist，否则只需在组件挂载时从localStorage加载数据，并在组件卸载时将其保存到localStorage中即可。

- Ayudh

Answer 3

当你刷新页面时，你将会失去当前状态，因为它没有被存储在其他地方，所以你必须先将其存储在某个地方。要存储状态，你可以直接将其存储在localStorage中，或者你可以使用redux-toolkit。 在我看来，redux-toolkit是最好的选择。

你需要安装redux-toolkit，然后根据你的使用情况创建slices和store，这样非常灵活，可以在需要时清空状态。

- Aniket Mohite

Answer 4

当你刷新页面时，它肯定会重新渲染并且状态会丢失。所以将其保存到一个本地变量中，然后添加到卡片组件中。

- Kalyan Sundar

Answer 5

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

useEffect(() => {
    let newCartData = localStorage.getItem("Product")
    if (newCartData === []) {
        return []
    }
    else {
        return JSON.parse(newCartData)
    }

}, [])

const addToCart = (product) => {
    localStorage.setItem("Product", JSON.stringify(product))
}

- Keyurlambhiya

---

https://meta.stackoverflow.com/a/285557/11107541 - starball