React+Dav改變props不觸發componentWillReceiveProps導致頁面無法再次渲染

番茄先森發表於2019-04-08

最近在學習dva,這個讓人頭疼,學會了超級好用的狀態管理框架,但是發現在真正實踐中還遇到了很多問題,通過耐心的尋找度娘,終於解決了這個讓我困惑了一陣問題。

所以記錄一下,希望能夠幫助後期入坑的小夥伴們。

這是一個簡單的todoList,通過路由跳轉三個頁面,add、home、modify,home中包括的兩個邏輯,刪除和修改,點選修改按鈕時跳轉的修改頁面,點選刪除時將該條資訊刪除,問題就是出現在刪除功能中,發現當點選刪除時,models層中的資料修改了,但是頁面上的資訊還在

貼程式碼~~~~


React+Dav改變props不觸發componentWillReceiveProps導致頁面無法再次渲染

最開始是這麼寫的,想著是splice是可以改變原陣列的,所以將改變後的this.props.list通過dispatch傳了過去,但是發現this.props.list更改了,但是頁面上的資訊並沒有刪除。

覺得應該是頁面沒有再次渲染,但是當改變props時,按照react的機制,要再次渲染頁面的。後期為了檢查是否再次渲染頁面,在componentWillReceiveProps輸出了props,發現並沒有觸發這個生命週期。

後期為了渲染頁面,加了個this.forceUpdate();功能是實現了,但是這個強制還是不加為好!!!

後期通過查詢度娘發現,這個props如果是引用資料型別的話,當這個引用資料型別的地址不發生變化時,是不會觸發componentWillReceiveProps,後期改了一下

貼程式碼~~~~


React+Dav改變props不觸發componentWillReceiveProps導致頁面無法再次渲染

完美解決,主要原理是js的深拷貝的,不知道是不是這個原因,如果有不對的地方,還請指正,勿噴!!!


相關文章