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

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

useState 與 React 中的異步操作沖突

useState 與 React 中的異步操作沖突

元芳怎么了 2021-10-29 16:28:14
在帶有useState鉤子的 React 功能組件中,我不知道如何運行多個異步操作而不會對最終結果產生沖突。如果初始狀態是一個對象并且每個異步操作都對給定的鍵執行更改,則可以使用擴展運算符來設置新狀態。例子:const [oldState, setNewState] = React.useState({ /* something */ });const asyncOperation = async () => {   await somethingAsync();   setNewState({      ...oldState,      key: 'newValue',   });};當更多這些操作同時運行時,問題就出現了:oldState使用的期間setNewState可能會在另一個異步函數結束時改變,但是當最后一個異步操作執行他的時候,狀態的一些更新可能會丟失,setNewState因為引用oldState可以指向到舊版本的變量。這是一個演示:嘗試單擊一行中的每個按鈕,最后,其中一些(可能)會導致仍在加載。如何在不留下反應鉤子的情況下避免這個問題?
查看完整描述

1 回答

?
一只斗牛犬

TA貢獻1784條經驗 獲得超2個贊

對于異步操作,您需要使用更新程序功能利用先前的狀態。


setNewState((previousState) => ({

  ...previousState,

  key: 'newValue',

}));

在這里,oldState是 != previousState。


查看完整回答
反對 回復 2021-10-29
  • 1 回答
  • 0 關注
  • 434 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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