【React】关于父组件传prop值给子组件的state时，子组件state无法实时更新的解决方案

cyrils 发布于2019-08-26 14:00 / 2589人阅读

问题描述：
在写项目的时候碰到这样一个问题
通过Link组件传递一个名为“name”的state给子组件

并在子组件中把接受到的prop值赋给state

当父组件点击Link进行传值时
子组件收到prop并调用render函数

我们在render函数中打印出state值
发现state值始终没有改变

问题分析
由于react的setstate方法是异步执行的，所以render函数并没有收到更新的state值

解决方法
react生命周期中有这样一个函数

componentWillReceiveProps

componentWillReceiveProps在初始化render的时候不会执行，它会在Component接受到新的状态(Props)时被触发，一般用于父组件状态更新时子组件的重新渲染。

我们重写这个函数

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

发现可以获取到实时的数据了

GPU云服务器云服务器子组件自动更新组件 linux的组件服务器的组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109951.html

react父子组件之间传值简述（近期学习心得）

摘要：前言中的数据流动有很好的解决方案，但是对于初学者来说学习曲线比较陡，并且在小型项目不太适用，开发维护成本都比较高，所以这里我只说单独用的情况下组件之间传值的用法，自学的，有不足烦请大神指正。以上是最近学习所得，如有错误烦请指正，不胜感激前言：react中的数据流动有很好的解决方案：redux，但是redux对于初学者来说学习曲线比较陡，并且在小型项目不太适用，开发维护成本都比较高，所...

PascalXie 2019-08-22 18:39 评论0 收藏0
5.React中组件通信问题

摘要：对于事件系统，这里有个基本操作步骤订阅监听一个事件通知，并发送触发发布发送一个事件通知那些想要的组件。看例子吧，很好理解在处理事件的时候，需要注意在事件中，如果组件挂载完成，再订阅事件当组件卸载的时候，在事件中取消事件的订阅。 1.父组件传递值给子组件想必这种大家都是知道的吧！都想到了用我们react中的props,那么我在这简单的写了小demo,请看父组件 class Parent...

Joyven 2019-08-30 14:18 评论0 收藏0
5.React中组件通信问题

摘要：对于事件系统，这里有个基本操作步骤订阅监听一个事件通知，并发送触发发布发送一个事件通知那些想要的组件。看例子吧，很好理解在处理事件的时候，需要注意在事件中，如果组件挂载完成，再订阅事件当组件卸载的时候，在事件中取消事件的订阅。 1.父组件传递值给子组件想必这种大家都是知道的吧！都想到了用我们react中的props,那么我在这简单的写了小demo,请看父组件 class Parent...

zhangxiangliang 2019-08-22 15:48 评论0 收藏0
5.React中组件通信问题

摘要：对于事件系统，这里有个基本操作步骤订阅监听一个事件通知，并发送触发发布发送一个事件通知那些想要的组件。看例子吧，很好理解在处理事件的时候，需要注意在事件中，如果组件挂载完成，再订阅事件当组件卸载的时候，在事件中取消事件的订阅。 1.父组件传递值给子组件想必这种大家都是知道的吧！都想到了用我们react中的props,那么我在这简单的写了小demo,请看父组件 class Parent...

Taonce 2019-08-02 10:02 评论0 收藏0
React父子组件间的传值

摘要：父组件默认值默认值哈哈哈哈传值给子组件接受子组件的传值为子组件啦啦啦啦接受父组件传的值为传值给父组件父组件： import React, { Component } from react; import Child from ./chlid; class parent extends Component{ constructor(props) { super...

宠来也 2019-08-23 13:08 评论0 收藏0