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

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

問(wèn)題描述：
在寫項(xiàng)目的時(shí)候碰到這樣一個(gè)問(wèn)題
通過(guò)Link組件傳遞一個(gè)名為“name”的state給子組件

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

當(dāng)父組件點(diǎn)擊Link進(jìn)行傳值時(shí)
子組件收到prop并調(diào)用render函數(shù)

我們?cè)趓ender函數(shù)中打印出state值
發(fā)現(xiàn)state值始終沒(méi)有改變

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

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

componentWillReceiveProps

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

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/109951.html

相關(guān)文章

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

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

PascalXie 2019-08-22 18:39 評(píng)論0 收藏0
5.React中組件通信問(wèn)題

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

Joyven 2019-08-30 14:18 評(píng)論0 收藏0
5.React中組件通信問(wèn)題

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

zhangxiangliang 2019-08-22 15:48 評(píng)論0 收藏0
5.React中組件通信問(wèn)題

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

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

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

寵來(lái)也 2019-08-23 13:08 評(píng)論0 收藏0