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

Posted on by

問題描述：

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

當修改原數組時，如果原數組是個深層數組（不隻一層），使用setTextList修改時，不會觸發頁面刷新

原因分析：

這個涉及到可變對象he不可變對象的知識，在vue和react中，如果更新可變對象時，可能會引起視圖更新，這是因為，vue和react默認都是淺監聽，隻會監聽數據的第一層，內層數據發生改變，並不會監聽到。

解決方案：

這裡我的解決方案是，先將原數組深拷貝，賦值給新數組，再修改新數組，將修改後的新數組傳遞進去，這樣就會引起視圖更新。

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

補：react中，hooks鉤子時useState更新不渲染組件的問題

當使用react，寫如圖組件時，發現一個很關鍵的問題，當選擇用class寫的時候，很容易通過組件更新渲染。
當我決定用函數式組件hooks來重構我的組件的時候，發現瞭一個很難搞的問題，當我通過onChange去改變父組件value的時候，value的值改瞭，竟然沒有重新渲染組件？？？？
一臉懵逼的我，於是試圖將class組件時先將value設為空再賦值—–失敗瞭
於是試圖通過鉤子的生命周期看瞭一遍。。。。——失敗瞭
還是百度吧——發現瞭同樣的問題。。。發現用隻要再後面加slice()
於是本著先解決問題的態度，將圖中紅圈位置改為瞭onChange(value.slice())
—–於是，解決瞭這個神奇的問題。

現在問題解決瞭，回過頭來看看到底怎麼回事。。。
查看文檔發現一句話useState裡數據務必為immutable （不可賦值的對象）
也就是ass component的state也提倡使用immutable數據，但不是強制的，因為隻要調用瞭setState就會觸發更新。所以再class組件中沒有出現這種問題，或者通過改變為空再賦值是可以觸發更新的。
但是再使用useState時，如果在更新函數裡傳入同一個對象時將無法觸發更新。
於是解決思路就是通過slice() 返回一個新的對象去賦值是解決問題的關鍵。。。。

以上就是react純函數組件setState更新頁面不刷新的解決的詳細內容，更多關於react useState頁面不刷新的資料請關註WalkonNet其它相關文章！

推薦閱讀：