react中父组件异步修改参数,传递给子组件时遇到的问题

最近在做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函数中,发现可以获取到父组件传来的值了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,833评论 19 139
  • 1.Typescript中的&理解 参数中的 & 表示props对象同时拥有了TagManagementState...
    Lethe35阅读 12,253评论 0 1
  • 作为一个合格的开发者,不要只满足于编写了可以运行的代码。而要了解代码背后的工作原理;不要只满足于自己的程序...
    六个周阅读 12,696评论 1 33
  • 还没进门,屋内传来相互嘟囔又透着欣喜的声音:婷安几回来了? 从长沙回来,就听说爷爷身体抱恙,我心里咯噔,一块石头掉...
    如面阅读 3,047评论 0 3
  • 百慕大群岛位于北大西洋,1503年西班牙人胡安·百慕大首先发现该岛。1609年英国人来此开始殖民,1684年沦为英...
    darko阅读 6,887评论 0 1

友情链接更多精彩内容