react hook使用useState更新數(shù)組,無法更新問題及解決

更新時間：2024年03月13日 10:11:19 作者：on_風而

這篇文章主要介紹了react hook使用useState更新數(shù)組,無法更新問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

問題描述

const [textList, setTextList] = useState(原數(shù)組);
setTextList(新數(shù)組);

當修改原數(shù)組時，如果原數(shù)組是個深層數(shù)組，使用setTextList修改時，不會觸發(fā)頁面刷新

原因分析

這個涉及到可變對象和不可變對象的知識，

在vue和react中，如果更新可變對象時，可能會引起視圖更新，

這是因為，vue和react默認都是淺監(jiān)聽，只會監(jiān)聽數(shù)據(jù)的第一層，

如果數(shù)據(jù)是引用類型，內(nèi)層數(shù)據(jù)發(fā)生改變，并不會監(jiān)聽到。

解決方法

這里應該先將原數(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一遍，解構一遍，再把結構的值為了生成新的數(shù)組，相當于淺拷貝，這樣才能觸發(fā)更新數(shù)據(jù)
        const copy = [...value];
        copy.splice(index, 1);
        setValue(copy);
    },
}

總結

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

react類標簽的生命周期詳解
在React類組件中,生命周期方法是非常重要的概念,它們允許我們在組件的不同階段執(zhí)行代碼,這包括在組件掛載、更新以及卸載時執(zhí)行的生命周期方法,本文通過介紹React類組件中的生命周期方法,旨在幫助開發(fā)者深入理解組件的生命周期管理
2024-11-11
React Render Props共享代碼技術
render props是指一種在 React 組件之間使用一個值為函數(shù)的 prop 共享代碼的技術。簡單來說，給一個組件傳入一個prop，這個props是一個函數(shù)，函數(shù)的作用是用來告訴這個組件需要渲染什么內(nèi)容，那么這個prop就成為render prop
2023-01-01
React實現(xiàn)前端選區(qū)的示例代碼
本文主要介紹了React實現(xiàn)前端選區(qū)的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-05-05
React中的Context應用場景分析
這篇文章主要介紹了React中的Context應用場景分析,Context 提供了一種在組件之間共享數(shù)據(jù)的方式，而不必顯式地通過組件樹的逐層傳遞 props，通過實例代碼給大家介紹使用步驟，感興趣的朋友跟隨小編一起看看吧
2021-06-06
詳解react使用react-bootstrap當輪子造車
本篇文章主要介紹了詳解react使用react-bootstrap當輪子造車，具有一定的參考價值，感興趣的小伙伴們可以參考一下。
2017-08-08
react-router?重新加回跳轉攔截功能詳解
這篇文章主要為大家介紹了react-router?重新加回跳轉攔截功能詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-02-02
react中事件處理與柯里化的實現(xiàn)
本文主要介紹了react中事件處理與柯里化的實現(xiàn)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-05-05
React中的JSX??{?}的使用詳解
這篇文章主要介紹了React中的JSX{?}的使用,React使用JSX來替代常規(guī)的JavaScript，JSX可以理解為的JavaScript語法擴展，它里面的標簽申明要符合XML規(guī)范要求，對React?JSX使用感興趣的朋友一起看看吧
2022-08-08
每天一個hooks學習之useUnmount
這篇文章主要為大家介紹了每天一個hooks學習之useUnmount，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-05-05
React合成事件原理解析
事件是在編程時系統(tǒng)內(nèi)發(fā)生的動作或者發(fā)生的事情，而開發(fā)者可以某種方式對事件做出回應，而這里有幾個先決條件，這篇文章主要介紹了React合成事件原理解析,需要的朋友可以參考下
2022-07-07