天天看點

開發中遇到的react問題記錄

在用react開發的時候遇到了一個問題:

在實作react父子元件通信時,我在父元件A中調用了子元件B,并向子元件B傳入父元件A的方法和state裡的2個變量。

開發中遇到的react問題記錄

在子元件B中接收到父元件A傳入的note和beats變量後,存入子元件的state中,子元件通過調用父元件的方法改變父元件的state值,使得父元件render重新渲染。本來以為父元件重新渲染連帶子元件重新渲染時,子元件中存儲的state值也會随着父元件傳入的值變更,結果子元件中的state并沒有随着父元件新傳入的值更新!最後發現是因為子元件存的state相當于開辟一個引用位址空間來存值(個人表達可能有問題),父元件傳新值進來是開辟新的位址空間來存值,而不是對目前子元件的state變量的位址空間的值進行改變覆寫,是以state存的值還是第一次傳入儲存的值,state中的變量值隻能通過觸發setState()改變。

開發中遇到的react問題記錄