在學習react時,在子組件調用父組件函數進行傳值的時候,出現這個錯誤:
初始寫法:
1. App.js 向 Home.js 傳遞一個 他自己的函數。
函數內容(獲取一個參數,把state的headerValue改成參數值):
2. 然後子組件 Home.js:
給個按鈕:
觸發改變方法,調用父組件傳過來的函數,實現把 父組件(App.js)裏邊state.headerValue的值改爲 “我是Home”:
然後點擊按鈕的時候,就報了上邊那個錯誤:
===============優雅的分割線=================
原因: this的指向問題。changeHeader (val) {}這個函數獲取的是子組件返回的值,而內部需要修改的是 父組件的 state。 這時this 就指的不是父組件,就會報這個錯誤。
解決辦法:
1. 傳入函數時加一個綁定:
2. 把App.js(要被調用的父組件) 改爲 箭頭函數:
即可! 日常採坑記錄,希望對童鞋們有幫助。。。。