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

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状态值的组件之一。

Answer 1

数据必须以某种方式持续存在 - 这意味着您必须将其实际保存在某个地方。您可以在客户端上使用 localStorage。然后，请确保在购物车发生变化时更新它。就像是：&nbsp; const [cart, setCart] = useState(localStorage.getItem('cart'));&nbsp; useEffect(()=>{&nbsp; &nbsp; &nbsp; localStorage.setItem('cart', cart)&nbsp; },[cart]);

Answer 2

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

Answer 3

您应该在代码中使用 localStorage。因为当你刷新页面时，你的状态是空的，但是本地存储存储了数据。useEffect(() => {&nbsp; &nbsp; let newCartData = localStorage.getItem("Product")&nbsp; &nbsp; if (newCartData === []) {&nbsp; &nbsp; &nbsp; &nbsp; return []&nbsp; &nbsp; }&nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; return JSON.parse(newCartData)&nbsp; &nbsp; }}, [])const addToCart = (product) => {&nbsp; &nbsp; localStorage.setItem("Product", JSON.stringify(product))}

Answer 4

当您刷新页面时，您将丢失当前状态，即它没有存储在其他地方，因此您必须首先将其存储在某个地方。要存储状态，您可以直接将其存储在 localStorage 中，也可以使用 redux-toolkit。在我看来，redux-toolkit 是最好的选择。您需要安装 redux-toolkit，然后根据您的用途创建切片并存储，这样可以非常灵活地重用并在需要时清空状态。