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