首頁(yè) 猿問(wèn) ReactJS如何在刷新頁(yè)面時(shí)保持...

ReactJS如何在刷新頁(yè)面時(shí)保持State值

JavaScript

不負(fù)相思意 2023-11-11 20:52:48

我試圖在重新加載頁(yè)面時(shí)不失去我的state價(jià)值。cart我可以在任何頁(yè)面添加任何product內(nèi)容cart，但每當(dāng)我重新加載時(shí)，頁(yè)面cart狀態(tài)都會(huì)自行重置。無(wú)論是否使用更多庫(kù)，是否有辦法防止這種情況發(fā)生？我不知道這是否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狀態(tài)值的組件之一。

查看完整描述

4 回答

繁華開滿天機(jī)

TA貢獻(xiàn)1816條經(jīng)驗(yàn) 獲得超4個(gè)贊

數(shù)據(jù)必須以某種方式持續(xù)存在 - 這意味著您必須將其實(shí)際保存在某個(gè)地方。

您可以在客戶端上使用 localStorage。然后，請(qǐng)確保在購(gòu)物車發(fā)生變化時(shí)更新它。

就像是：

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

useEffect(()=>{

localStorage.setItem('cart', cart)

},[cart]);

反對(duì) 回復(fù) 2023-11-11

江戶川亂折騰

TA貢獻(xiàn)1851條經(jīng)驗(yàn) 獲得超5個(gè)贊

如果您使用 Redux，請(qǐng)使用Redux-Persist，否則只需在組件掛載時(shí)從 localStorage 加載數(shù)據(jù)，并在組件卸載時(shí)將其保存到 localStorage

反對(duì) 回復(fù) 2023-11-11

jeck貓

TA貢獻(xiàn)1909條經(jīng)驗(yàn) 獲得超7個(gè)贊

您應(yīng)該在代碼中使用 localStorage。因?yàn)楫?dāng)你刷新頁(yè)面時(shí)，你的狀態(tài)是空的，但是本地存儲(chǔ)存儲(chǔ)了數(shù)據(jù)。

useEffect(() => {

let newCartData = localStorage.getItem("Product")

if (newCartData === []) {

return []

}

else {

return JSON.parse(newCartData)

}

}, [])

const addToCart = (product) => {

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

}

反對(duì) 回復(fù) 2023-11-11

開心每一天1111

TA貢獻(xiàn)1836條經(jīng)驗(yàn) 獲得超13個(gè)贊

當(dāng)您刷新頁(yè)面時(shí)，您將丟失當(dāng)前狀態(tài)，即它沒(méi)有存儲(chǔ)在其他地方，因此您必須首先將其存儲(chǔ)在某個(gè)地方。要存儲(chǔ)狀態(tài)，您可以直接將其存儲(chǔ)在 localStorage 中，也可以使用 redux-toolkit。在我看來(lái)，redux-toolkit 是最好的選擇。

您需要安裝 redux-toolkit，然后根據(jù)您的用途創(chuàng)建切片并存儲(chǔ)，這樣可以非常靈活地重用并在需要時(shí)清空狀態(tài)。

反對(duì) 回復(fù) 2023-11-11