亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

ReactJS如何在刷新頁面時保持State值

ReactJS如何在刷新頁面時保持State值

不負相思意 2023-11-11 20:52:48
我試圖在重新加載頁面時不失去我的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狀態值的組件之一。
查看完整描述

4 回答

?
繁華開滿天機

TA貢獻1816條經驗 獲得超4個贊

數據必須以某種方式持續存在 - 這意味著您必須將其實際保存在某個地方。


您可以在客戶端上使用 localStorage。然后,請確保在購物車發生變化時更新它。


就像是:


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


  useEffect(()=>{

      localStorage.setItem('cart', cart)

  },[cart]);


查看完整回答
反對 回復 2023-11-11
?
江戶川亂折騰

TA貢獻1851條經驗 獲得超5個贊

如果您使用 Redux,請使用Redux-Persist,否則只需在組件掛載時從 localStorage 加載數據,并在組件卸載時將其保存到 localStorage



查看完整回答
反對 回復 2023-11-11
?
jeck貓

TA貢獻1909條經驗 獲得超7個贊

您應該在代碼中使用 localStorage。因為當你刷新頁面時,你的狀態是空的,但是本地存儲存儲了數據。


useEffect(() => {

    let newCartData = localStorage.getItem("Product")

    if (newCartData === []) {

        return []

    }

    else {

        return JSON.parse(newCartData)

    }


}, [])


const addToCart = (product) => {

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

}


查看完整回答
反對 回復 2023-11-11
?
開心每一天1111

TA貢獻1836條經驗 獲得超13個贊

當您刷新頁面時,您將丟失當前狀態,即它沒有存儲在其他地方,因此您必須首先將其存儲在某個地方。要存儲狀態,您可以直接將其存儲在 localStorage 中,也可以使用 redux-toolkit。在我看來,redux-toolkit 是最好的選擇。

您需要安裝 redux-toolkit,然后根據您的用途創建切片并存儲,這樣可以非常靈活地重用并在需要時清空狀態。


查看完整回答
反對 回復 2023-11-11
  • 4 回答
  • 0 關注
  • 277 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號