【React】關于父組件傳prop值給子組件的state時，子組件state無法實時更新的解決方案

cyrils 發布于2019-08-26 14:00 / 2586人閱讀

問題描述：
在寫項目的時候碰到這樣一個問題
通過Link組件傳遞一個名為“name”的state給子組件

并在子組件中把接受到的prop值賦給state

當父組件點擊Link進行傳值時
子組件收到prop并調用render函數

我們在render函數中打印出state值
發現state值始終沒有改變

問題分析
由于react的setstate方法是異步執行的，所以render函數并沒有收到更新的state值

解決方法
react生命周期中有這樣一個函數

componentWillReceiveProps

componentWillReceiveProps在初始化render的時候不會執行，它會在Component接受到新的狀態(Props)時被觸發，一般用于父組件狀態更新時子組件的重新渲染。

我們重寫這個函數

    componentWillReceiveProps(nextProps) {
        if(nextProps.location.state!=undefined){
            this.setState({
                activekey: nextProps.location.state.name
            })
        }
    }

發現可以獲取到實時的數據了

云服務器 GPU云服務器子組件自動更新組件 linux的組件服務器的組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109951.html

react父子組件之間傳值簡述（近期學習心得）

摘要：前言中的數據流動有很好的解決方案，但是對于初學者來說學習曲線比較陡，并且在小型項目不太適用，開發維護成本都比較高，所以這里我只說單獨用的情況下組件之間傳值的用法，自學的，有不足煩請大神指正。以上是最近學習所得，如有錯誤煩請指正，不勝感激前言：react中的數據流動有很好的解決方案：redux，但是redux對于初學者來說學習曲線比較陡，并且在小型項目不太適用，開發維護成本都比較高，所...

PascalXie 2019-08-22 18:39 評論0 收藏0
5.React中組件通信問題

摘要：對于事件系統，這里有個基本操作步驟訂閱監聽一個事件通知，并發送觸發發布發送一個事件通知那些想要的組件。看例子吧，很好理解在處理事件的時候，需要注意在事件中，如果組件掛載完成，再訂閱事件當組件卸載的時候，在事件中取消事件的訂閱。 1.父組件傳遞值給子組件想必這種大家都是知道的吧！都想到了用我們react中的props,那么我在這簡單的寫了小demo,請看父組件 class Parent...

Joyven 2019-08-30 14:18 評論0 收藏0
5.React中組件通信問題

摘要：對于事件系統，這里有個基本操作步驟訂閱監聽一個事件通知，并發送觸發發布發送一個事件通知那些想要的組件。看例子吧，很好理解在處理事件的時候，需要注意在事件中，如果組件掛載完成，再訂閱事件當組件卸載的時候，在事件中取消事件的訂閱。 1.父組件傳遞值給子組件想必這種大家都是知道的吧！都想到了用我們react中的props,那么我在這簡單的寫了小demo,請看父組件 class Parent...

zhangxiangliang 2019-08-22 15:48 評論0 收藏0
5.React中組件通信問題

摘要：對于事件系統，這里有個基本操作步驟訂閱監聽一個事件通知，并發送觸發發布發送一個事件通知那些想要的組件。看例子吧，很好理解在處理事件的時候，需要注意在事件中，如果組件掛載完成，再訂閱事件當組件卸載的時候，在事件中取消事件的訂閱。 1.父組件傳遞值給子組件想必這種大家都是知道的吧！都想到了用我們react中的props,那么我在這簡單的寫了小demo,請看父組件 class Parent...

Taonce 2019-08-02 10:02 評論0 收藏0
React父子組件間的傳值

摘要：父組件默認值默認值哈哈哈哈傳值給子組件接受子組件的傳值為子組件啦啦啦啦接受父組件傳的值為傳值給父組件父組件： import React, { Component } from react; import Child from ./chlid; class parent extends Component{ constructor(props) { super...

寵來也 2019-08-23 13:08 評論0 收藏0