快捷導(dǎo)航

react純函數(shù)組件setState更新頁面不刷新的解決

更新時(shí)間：2021年06月29日 09:33:40 作者：蒙悅納

在開發(fā)過程中，經(jīng)常遇到組件數(shù)據(jù)無法更新，本文主要介紹了react純函數(shù)組件setState更新頁面不刷新的解決，感興趣的可以了解一下

問題描述：

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

當(dāng)修改原數(shù)組時(shí)，如果原數(shù)組是個(gè)深層數(shù)組（不只一層），使用setTextList修改時(shí)，不會(huì)觸發(fā)頁面刷新

原因分析：

這個(gè)涉及到可變對(duì)象he不可變對(duì)象的知識(shí)，在vue和react中，如果更新可變對(duì)象時(shí)，可能會(huì)引起視圖更新，這是因?yàn)?，vue和react默認(rèn)都是淺監(jiān)聽，只會(huì)監(jiān)聽數(shù)據(jù)的第一層，內(nèi)層數(shù)據(jù)發(fā)生改變，并不會(huì)監(jiān)聽到。

解決方案：

這里我的解決方案是，先將原數(shù)組深拷貝，賦值給新數(shù)組，再修改新數(shù)組，將修改后的新數(shù)組傳遞進(jìn)去，這樣就會(huì)引起視圖更新。

var lists = textList.concat();
lists.splice(index, 1);
setTextList(lists);

補(bǔ)：react中，hooks鉤子時(shí)useState更新不渲染組件的問題

當(dāng)使用react，寫如圖組件時(shí)，發(fā)現(xiàn)一個(gè)很關(guān)鍵的問題，當(dāng)選擇用class寫的時(shí)候，很容易通過組件更新渲染。
當(dāng)我決定用函數(shù)式組件hooks來重構(gòu)我的組件的時(shí)候，發(fā)現(xiàn)了一個(gè)很難搞的問題，當(dāng)我通過onChange去改變父組件value的時(shí)候，value的值改了，竟然沒有重新渲染組件？？？？
一臉懵逼的我，于是試圖將class組件時(shí)先將value設(shè)為空再賦值-----失敗了
于是試圖通過鉤子的生命周期看了一遍。。。。------失敗了
還是百度吧------發(fā)現(xiàn)了同樣的問題。。。發(fā)現(xiàn)用只要再后面加slice()
于是本著先解決問題的態(tài)度，將圖中紅圈位置改為了onChange(value.slice())
-----于是，解決了這個(gè)神奇的問題。

現(xiàn)在問題解決了，回過頭來看看到底怎么回事。。。
查看文檔發(fā)現(xiàn)一句話useState里數(shù)據(jù)務(wù)必為immutable （不可賦值的對(duì)象）
也就是ass component的state也提倡使用immutable數(shù)據(jù)，但不是強(qiáng)制的，因?yàn)橹灰{(diào)用了setState就會(huì)觸發(fā)更新。所以再class組件中沒有出現(xiàn)這種問題，或者通過改變?yōu)榭赵儋x值是可以觸發(fā)更新的。
但是再使用useState時(shí)，如果在更新函數(shù)里傳入同一個(gè)對(duì)象時(shí)將無法觸發(fā)更新。
于是解決思路就是通過slice() 返回一個(gè)新的對(duì)象去賦值是解決問題的關(guān)鍵。。。。

以上就是react純函數(shù)組件setState更新頁面不刷新的解決的詳細(xì)內(nèi)容，更多關(guān)于react useState頁面不刷新的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: