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