react State改變,頁面卻沒有改變


react 小白編程

做項目時遇到了個問題,無論我怎么查看我的action、reducer 還是 dispatch 函數,都沒有發現有什么毛病。但是 debugger 的時候,state 改變了,頁面卻沒有變。

困擾了我好長時間,后來發現是因為我在使用 reducer 修改 state 的時候,遇到了一個極大的錯誤🙅!

我要修改的 state 值是一個數組,而我卻在原數組上使用 Splice 進行修改。

熟悉 arr.splice() 函數的應該知道,該方法是在原數組上進行修改。而我的原數組就是我的真是的 state。

而 React 的核心是虛擬 DOM,在 render 的時候,會比較前后兩個 state 是否發生變化,如果發現沒有發生變化,則不進行 DOM 更新。而我在 reducer 的時候直接在原 state 上進行修改,那么在 render 的時候,無論怎樣都是發現不了 state 的變化的。

所以,針對上述問題,進行更正:先用 arr.slice() 方法獲得一個該數組的副本,然后再對其副本進行修改。這樣就正常了!

⚠️所以,使用數組方法的時候,一定要知道哪些是會產生一個數組副本,哪些是在數組本身上進行修改的!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM