react hook使用useState更新數(shù)組,無法更新問題及解決
更新時間：2024年03月13日 10:11:19 作者：on_風(fēng)而
這篇文章主要介紹了react hook使用useState更新數(shù)組,無法更新問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
問題描述
const [textList, setTextList] = useState(原數(shù)組); setTextList(新數(shù)組);
當(dāng)修改原數(shù)組時，如果原數(shù)組是個深層數(shù)組，使用setTextList修改時，不會觸發(fā)頁面刷新
原因分析
這個涉及到可變對象和不可變對象的知識，
在vue和react中，如果更新可變對象時，可能會引起視圖更新，
這是因為，vue和react默認(rèn)都是淺監(jiān)聽，只會監(jiān)聽數(shù)據(jù)的第一層，
如果數(shù)據(jù)是引用類型，內(nèi)層數(shù)據(jù)發(fā)生改變，并不會監(jiān)聽到。
解決方法
這里應(yīng)該先將原數(shù)組淺拷貝，賦值給新數(shù)組，再修改新數(shù)組（不影響原狀態(tài)）
將修改后的新數(shù)組使用setValue傳遞進去，這樣就會引起視圖更新
const [value, setValue] = useState(initialArray);
return{
//item是個數(shù)組
add: (item: T) => setValue([...value, item]),
removeIndex: (index: number) => {
// 把value copy一遍，解構(gòu)一遍，再把結(jié)構(gòu)的值為了生成新的數(shù)組，相當(dāng)于淺拷貝，這樣才能觸發(fā)更新數(shù)據(jù)
const copy = [...value];
copy.splice(index, 1);
setValue(copy);
},
}
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
在React類組件中,生命周期方法是非常重要的概念,它們允許我們在組件的不同階段執(zhí)行代碼,這包括在組件掛載、更新以及卸載時執(zhí)行的生命周期方法,本文通過介紹React類組件中的生命周期方法,旨在幫助開發(fā)者深入理解組件的生命周期管理2024-11-11
render props是指一種在 React 組件之間使用一個值為函數(shù)的 prop 共享代碼的技術(shù)。簡單來說，給一個組件傳入一個prop，這個props是一個函數(shù)，函數(shù)的作用是用來告訴這個組件需要渲染什么內(nèi)容，那么這個prop就成為render prop2023-01-01
本文主要介紹了React實現(xiàn)前端選區(qū)的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
這篇文章主要介紹了React中的Context應(yīng)用場景分析,Context 提供了一種在組件之間共享數(shù)據(jù)的方式，而不必顯式地通過組件樹的逐層傳遞 props，通過實例代碼給大家介紹使用步驟，感興趣的朋友跟隨小編一起看看吧2021-06-06
詳解react使用react-bootstrap當(dāng)輪子造車
本篇文章主要介紹了詳解react使用react-bootstrap當(dāng)輪子造車，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-08-08
react-router?重新加回跳轉(zhuǎn)攔截功能詳解
這篇文章主要為大家介紹了react-router?重新加回跳轉(zhuǎn)攔截功能詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
本文主要介紹了react中事件處理與柯里化的實現(xiàn)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要介紹了React中的JSX{?}的使用,React使用JSX來替代常規(guī)的JavaScript，JSX可以理解為的JavaScript語法擴展，它里面的標(biāo)簽申明要符合XML規(guī)范要求，對React?JSX使用感興趣的朋友一起看看吧2022-08-08
每天一個hooks學(xué)習(xí)之useUnmount
這篇文章主要為大家介紹了每天一個hooks學(xué)習(xí)之useUnmount，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
事件是在編程時系統(tǒng)內(nèi)發(fā)生的動作或者發(fā)生的事情，而開發(fā)者可以某種方式對事件做出回應(yīng)，而這里有幾個先決條件，這篇文章主要介紹了React合成事件原理解析,需要的朋友可以參考下2022-07-07