React父组件在componetDidMount中传值给子组件问题

已于 2023-05-14 15:36:55 修改
阅读量445 收藏
点赞数
文章标签： react.js 前端 javascript
于 2023-05-11 23:05:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_38133212/article/details/130632593
版权

背景：
React代码中，父组件在componentDidMount中初始化各种数据，最后通过this.setState传值给子组件的props，子组件在componentDidMount中读取this.props设置给它的state。但测试时会发现页面初始化时，子组件在componentDidMount中并没有接收到父组件初始化的数据，但此时若打印出子组件的props时，可以看到这里有父组件传递的值。因此猜测应当是父组件setState还未完成时，组件便已完成渲染，子组件的props此时还没有接收到数据。
问题解决：
目前想的方案是在子组件componentDidUpdate方法中将之前的prevProps与当前的this.props比较，如果有变化，则更新到state

街道口扛把子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React 子组件向父组件传值的方法
08-29
React 中，子组件向父组件传值是一种常见的需求，例如在表单提交时，子组件需要将输入的数据传递给父组件，以便父组件可以对数据进行处理和展示。那么，如何实现 React 子组件向父组件传值呢？下面我们将详细介绍该...
React生命周期方法之 componentDidMount
star_zone的博客
03-22 3万+
1. componentDidMount() 这个生命周期方法应该是用的最多的，一般用在进入页面后，数据初始化，这种情况下，跟model中的subscription方法作用是一样的。但是当你数据初始化方法都写在subscription方法时，当你改了页面访问路径，model里面的path没改过来，初始化方法就调不到了。但是要是把数据初始化接口都放在componentDidMount函数里，只要进...
「React 基础」组件生命周期函数componentDidMount()介绍
前端达人
02-04 1万+
大家好，今天我们将通过一个实例——番茄计时器，学习下如何使用函数生命周期的一个重要函数componentDidMount()：在组件加载完成， render之后进行调用，只会执行一次。番...
componentWillMount 和 componentDidMount的区别
热门推荐
qq_38719039的博客
09-04 8万+
一、 调用时期不同 转自：https://www.cnblogs.com/xyn0909/p/8516074.html 1、componentWillMount 将要装载，在render之前调用； componentDidMount，（装载完成），在render之后调用 2、componentWillMount 每一个组件render之前立即调用； compo...
【异常记录】React子组件通过componentDidMount()生命周期函数获取父组件props失败
qq_46447737的博客
12-15 226
React子组件通过componentDidMount()生命周期函数获取父组件中props失败
【react全家桶学习】react的 (新/旧) 生命周期（重点）
蜗牛~~
06-27 6338
相对比vue的生命周期，react显得复杂的多，光从名称上就比vue长，所以做好准备，不要放弃，坚持就是胜利、
react 中父组件与子组件双向绑定问题
10-16
主要介绍了react 中父组件与子组件双向绑定问题，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
react 父组件与子组件之间的值传递的方法
08-29
本篇文章主要介绍了react 父组件与子组件之间的值传递的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
React通过父组件传递类名给子组件的实现方法
10-19
React 是一个用于构建用户界面的 JAVASCRIPT 库。这篇文章主要介绍了React通过父组件传递类名给子组件的方法,需要的朋友可以参考下
componentDidMount 用法
秋霜梦红尘的博客
05-31 4305
componentDidMount 用法 import React, { Component } from 'react'; // 封装组件 class Hellow extends React.Component{ constructor(props){ super(props); // 设置初始透明度为1 this.state = {opacity:1.0} } // 组件渲染后调用 componentDidMount(){
React 学习笔记：组件生命周期
weixin_46015333的博客
12-08 638
生命周期一个事物从创建到最后消亡经历的过程，在这个过程中会有不同的状态（新生儿、少年···），所以在 16.8 版本以前生命周期只有类组件才有，函数组件是没有这个概念的，因为它没有状态，本文就是总结类组件生命周期。了解生命周期有助于我们理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因。
react生命周期之 componentDidMount
sw_onload的博客
12-06 625
在render之后调用，仅在装载组件时调用，之后不再调用，即使state、props变化也不会调用，除非将组件卸载
Python—实训day8—掌握DataFrame的常用操作
#请假条的博客
09-25 1948
2掌握DataFrame的常用操作 2.1基础属性 detail.columns #列名 detail.index #索引/行名 detail.shape #形状 detail.dtypes #类型 2.2查改增删DataFrame数据 2.2.1查看访问DataFrame中的数据 （1）对单列数据的访问 DataFrame的单列数据为一个Series。根据DataFrame的定义可以知晓DataFrame是一个带有标签的二维数组，每个标签相当每一列的列名。 有以下两种方式来实现对单列数
react ComponentDidMount与render的顺序
大赚万万亿
07-06 2136
react生命周期
React 从零开始学习（十）—— 组件生命周期
且听风吟的博客
07-30 323
React 生命周期
componentDidMount()
GoodIdea
02-20 5776
componentDidMount()紧跟在组件装载后（被插入树中）调用。要求的DOM节点初始化应该放到这里。若你需要从远端加载数据，这是一个适合实例化网络请求的好地方。 这个方法是建立任何订阅的一个好地方。如果你那么做了，别忘了在componentWillUnmount()取消订阅。 在componentDidMount()中，你 可以立即调用setState()。它将会触发一次额外的渲染，...
taro 缺点_taro框架的缺陷以及注意事项
weixin_39593354的博客
12-21 1068
1.不要使用 eval()2.禁止使用 Object 构造器let config = new Object() // ✗ 错误3.不使用 Generator 函数语法使用Promise或者async functions来实现异步编程function* helloWorldGenerator() { // ✗ 错误yield 'hello';yield 'world';return 'e...
React：Component类型的父子组件如何传参？我来告诉你！
Mr_Ohahah的博客
10-27 1371
React项目开发总结：父子组件函数调用-Component类定义形式父子组件关系简谈父组件调用子组件函数App.jsChild1.js父组件调用子组件函数且传参App.jsChild2.js子组件调用父组件函数App.jsChild1.js子组件调用父组件函数且传参App.jsChild2.jsChild2.js(改进)Child2.js(最终版)Route子组件调用父组件函数 父子组件关系简谈 父组件 内 包含有 子组件，这是基本关系 所以，父组件render渲染时，子组件会紧紧跟随伴其渲染，无论何种情
React组件的DidMount事件里的setState事件
weixin_33940102的博客
01-12 1692
参考原文： React 源码剖析系列 － 解密 setState setState 之后发生了什么 —— 浅谈 React 中的 Transaction 无法多次setState React组件的componentDidMount事件里使用setState方法，会有一些有趣的事情： class Example extends React.Component { construct...
React函数组件 怎么子组件给父组件传值
最新发布
03-20
React函数组件是一种使用函数定义的React组件。它是React中的一种轻量级组件形式，可以通过函数的方式来定义组件的结构和行为。 在React中，子组件向父组件传值可以通过以下几种方式实现： 1. 通过props传递：父组件可以通过props将数据或者函数传递给子组件。子组件可以通过props接收到父组件传递的值，并进行相应的处理。当子组件需要向父组件传值时，可以调用父组件传递的函数，并将需要传递的值作为参数传入。 2. 使用回调函数：父组件可以定义一个回调函数，并将该函数作为props传递给子组件。子组件可以在需要传值的时候调用该回调函数，并将需要传递的值作为参数传入。通过这种方式，子组件可以将值传递给父组件。 3. 使用Context API：React提供了Context API来实现跨组件的数据传递。父组件可以通过创建一个Context对象，并将需要传递的值放在该对象中。子组件可以通过使用Context对象的Consumer组件来获取到父组件传递的值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值