最近在做react組件間傳參的時(shí)候毁欣，遇到了一個(gè)問題庇谆，就是在父組件中通過調(diào)用異步函數(shù)修改了某一參數(shù)值，將其傳遞給子組件后凭疮，在子組件的componentDidMount()函數(shù)中獲取到的仍然是未修改之前的值饭耳。
首先在父組件中定義參數(shù)初始值：
constructor(){
super();
this.state = {
testParam: [], //此處定義一個(gè)數(shù)組名為testParam，初始值為空
}
}
然后在父組件中执解，調(diào)用異步函數(shù)寞肖，獲取服務(wù)器返回值，并修改testParam：
componentDidMount(){
getContent().then(res => { //此處調(diào)用異步函數(shù)衰腌，從服務(wù)器獲取到數(shù)組res新蟆，值不為空
this.setState({
testParam: res
})
})
}
將參數(shù)傳遞給子組件：
render(){
return (
<ChildComponents
testParam={this.state.testParam}
/>
)
}
子組件中在組件掛載后的執(zhí)行函數(shù)中獲取數(shù)組testParam
componentDidMount() {
console.log(’testParam：‘, this.props.testParam)
}
此處輸出的一直都是testParam： []
困惑了好久，最終發(fā)現(xiàn)右蕊，原因是：react打包執(zhí)行后琼稻，所有組件都會(huì)初始化一遍，由于獲取服務(wù)器參數(shù)的函數(shù)是異步調(diào)用的饶囚，所以在組件初始化的時(shí)候數(shù)組testParam獲取到的是初始值帕翻，即為[]。
當(dāng)異步函數(shù)執(zhí)行后萝风，數(shù)組testParam的值發(fā)生改變嘀掸，此時(shí)將參數(shù)傳遞給子組件，一直以為父組件傳遞參數(shù)后闹丐，子組件會(huì)重新渲染横殴，所以在組件掛載之后執(zhí)行的函數(shù)componentDidMount() 中獲取參數(shù)，但是一直得到的是空值卿拴。
原來父組件傳遞的參數(shù)改變后衫仑，子組件會(huì)重新渲染的只有render函數(shù)，所以將console.log(’testParam：‘, this.props.testParam)放在子組件的render函數(shù)中堕花，發(fā)現(xiàn)可以獲取到父組件傳來的值了文狱。
