最近在做react组件间传参的时候,遇到了一个问题,就是在父组件中通过调用异步函数修改了某一参数值,将其传递给子组件后,在子组件的componentDidMount()函数中获取到的仍然是未修改之前的值。
首先在父组件中定义参数初始值:
constructor(){
super();
this.state = {
testParam: [], //此处定义一个数组名为testParam,初始值为空
}
}
然后在父组件中,调用异步函数,获取服务器返回值,并修改testParam:
componentDidMount(){
getContent().then(res => { //此处调用异步函数,从服务器获取到数组res,值不为空
this.setState({
testParam: res
})
})
}
将参数传递给子组件:
render(){
return (
<ChildComponents
testParam={this.state.testParam}
/>
)
}
子组件中在组件挂载后的执行函数中获取数组testParam
componentDidMount() {
console.log(’testParam:‘, this.props.testParam)
}
此处输出的一直都是testParam: []
困惑了好久,最终发现,原因是:react打包执行后,所有组件都会初始化一遍,由于获取服务器参数的函数是异步调用的,所以在组件初始化的时候数组testParam获取到的是初始值,即为[]。
当异步函数执行后,数组testParam的值发生改变,此时将参数传递给子组件,一直以为父组件传递参数后,子组件会重新渲染,所以在组件挂载之后执行的函数componentDidMount() 中获取参数,但是一直得到的是空值。
原来父组件传递的参数改变后,子组件会重新渲染的只有render函数,所以将console.log(’testParam:‘, this.props.testParam)放在子组件的render函数中,发现可以获取到父组件传来的值了。