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

cyrils 發(fā)布于2019-08-26 14:00 / 2678人閱讀

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

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

當父組件點擊Link進行傳值時
子組件收到prop并調(diào)用render函數(shù)

我們在render函數(shù)中打印出state值
發(fā)現(xiàn)state值始終沒有改變

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

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

componentWillReceiveProps

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

我們重寫這個函數(shù)

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

發(fā)現(xiàn)可以獲取到實時的數(shù)據(jù)了

GPU云服務(wù)器云服務(wù)器子組件自動更新組件 linux的組件服務(wù)器的組件

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/109951.html

相關(guān)文章

react父子組件之間傳值簡述（近期學(xué)習(xí)心得）

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

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

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

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

摘要：對于事件系統(tǒng)，這里有個基本操作步驟訂閱監(jiān)聽一個事件通知，并發(fā)送觸發(fā)發(fā)布發(fā)送一個事件通知那些想要的組件?？蠢影桑芎美斫庠谔幚硎录臅r候，需要注意在事件中，如果組件掛載完成，再訂閱事件當組件卸載的時候，在事件中取消事件的訂閱。 1.父組件傳遞值給子組件想必這種大家都是知道的吧！都想到了用我們react中的props,那么我在這簡單的寫了小demo,請看父組件 class Parent...

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

摘要：對于事件系統(tǒng)，這里有個基本操作步驟訂閱監(jiān)聽一個事件通知，并發(fā)送觸發(fā)發(fā)布發(fā)送一個事件通知那些想要的組件?？蠢影?，很好理解在處理事件的時候，需要注意在事件中，如果組件掛載完成，再訂閱事件當組件卸載的時候，在事件中取消事件的訂閱。 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