React子组件没有随父组件更新问题的解决

本文介绍了一种React应用中常见的子组件更新不及时的问题及其解决方案。问题表现为尽管父组件传递的属性已更改,但子组件未能响应这些变化。文中提供了两种解决方法:直接使用props值或在componentWillReceiveProps中更新state。

前言:今天遇到一个小需求,本来只是修改文案的,结果问题卡了很久很久,想想还是太菜了

问题描述:

根据changePlaceHolder修改AInput的placeholder的默认值,AInput是封装的antd的input组件,期间发现,无论如何改变changePlaceHolder,placeholder显示的都是“显示2”,但其实changePlaceHolder已经是成功改变了的

后面在AInput子组件里面发现,封装的时候,将父组件传的placeholder先在constructor中保存在state里面,使用的时候直接用的this.state.placeholder,造成了子组件没用随父组件更新的结果。

解决方法:

方法一:

在子组件中直接通过placeholder={this.props. placeholder}获取父组件的传值

placeholder={this.props.placeholder}

方法二:

在componentWillReceiveProps对父组件传的参数再一次赋值到state中

componentWillReceiveProps(nextProps) {
    this.setState({placeholder: nextProps.placeholder});
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小灰灰学编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值