React父组件异步获取的contacts props为何无法正常传递给子组件?
React组件传值时序问题:父组件contacts状态传入子组件后显示为空
已验证的运行与代码现状
- 父组件为Database类组件,在
componentDidMount生命周期中依次发起客户端列表、联系人列表两类接口请求 - 接口返回后执行
setState更新组件state中的contacts数组,该更新逻辑运行正常:控制台打印的state内contacts结果完全符合预期,不存在数据处理逻辑错误 - 遍历客户端列表生成ClientAccordion子组件时,将
this.state.contacts作为props传入子组件 - 子组件接收的其余所有属性均可正常读取、使用,仅contacts属性存在读取异常
- 异常表现复现稳定:即便在子组件自身的
componentDidMount生命周期内打印该props值,得到的仍然是空数组 - 初步问题判断:该问题大概率与组件执行时序相关,但目前尚未定位到根因,也没有找到可行的有效修复方案
当前开发阻塞点
- 预设的业务逻辑为:在子组件内根据客户端的short标识,从传入的contacts数组中过滤匹配对应的联系人数据
- 当前因props传值异常,无法获取正确的contacts数组完成上述过滤逻辑,功能开发完全受阻
内容的提问来源于stack exchange,提问作者Adam Norton
相关产品推荐
相关产品推荐

