React JS - 状态管理

Question

我最近一直在学习React，我尝试构建一个小型网络应用程序来学习React。我对国家管理有疑问。

我现在没有使用任何库进行状态管理，也没有使用任何数据库。我想了解哪种是维持状态的最佳方式。

// index.js 
...
<Routes>
    <Route exact path="/" element={<App/>}></Route>
    <Route exact path="/cart" element={<Cart/>}></Route>
</Routes>
...

// App.js
function App() {
    ...
    // fetch Product data -> productData
    // update Cart data -> cartData
    <Product data={productData} {updateCart} />
    ...
}

// Cart.js
function Cart() {
    ...
    <Cart data={cartData} />
    ...
}

考虑上面的片段。

我有两页

产品页面

购物车页面

我正在获取产品页面中的数据，当产品添加到购物车时，我将更新“cardData”。现在我想在购物车页面中使用“cartData”。

实现这一目标的最佳方法是什么？我考虑过将其存储在缓存中。如果有DB我们可以存储它。

Answer 1

在这种情况下，存储数据的最佳方式是

localStorage

。在那里，您应该为购物车定义一个键，您的值将是一个包含购物车中产品的数组。

在 ReactJS 中，您可以通过以下方式访问

localStorage

:

//for reading the 'cart' value
localStorage.getItem('cart');

//for writing the 'cart' value
localStorage.setItem('cart', JSON.stringify(products));

正如你所说，如果你有数据库，你应该将这些数据存储在数据库中。

Answer 2

通常您会使用包装器来管理状态和 API 调用。但是，如果您有多个页面需要访问相同的状态，那么请查看react useContext，这本质上是创建全局状态的一种方式。