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。然后，请确保在购物车发生变化时更新它。

就像是：

  const [cart, setCart] = useState(localStorage.getItem('cart'));

  useEffect(()=>{

      localStorage.setItem('cart', cart)

  },[cart]);

Answer 2

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

Answer 3

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

useEffect(() => {

    let newCartData = localStorage.getItem("Product")

    if (newCartData === []) {

        return []

    }

    else {

        return JSON.parse(newCartData)

    }

}, [])

const addToCart = (product) => {

    localStorage.setItem("Product", JSON.stringify(product))

}

Answer 4

当您刷新页面时，您将丢失当前状态，即它没有存储在其他地方，因此您必须首先将其存储在某个地方。要存储状态，您可以直接将其存储在 localStorage 中，也可以使用 redux-toolkit。在我看来，redux-toolkit 是最好的选择。

您需要安装 redux-toolkit，然后根据您的用途创建切片并存储，这样可以非常灵活地重用并在需要时清空状态。