react 子组件调用父组件方法,获取的数据不是最新值

news/2024/5/18 19:15:56

目录

      • 原因
      • 解决方法
          • 方法一、去掉 useCallback, 这样每次父组件触发刷新,就会刷新子组件
          • 方法二、或者通过监听 val,val 值改变来刷新函数
          • 方法三、在父组件中,把 val 作为 key 值,每次 val 变化强制触发更新

出现问题的代码如下:

const Parent: React.FC = () => {const [val, setVal] = useState(0);const onBtnsClick = () => {console.log(val);};return (<div>{val}<button onClick={() => setVal(val => val + 1)}>加一</button><Child onClick={onBtnsClick} /></div>);
};const Child: React.FC<{ onClick: () => void }> = ({ onClick }) => {// useCallback + 防抖const onBtnClick = useCallback(_.debounce(onClick, 1000, { leading: true, trailing: false }),[]);return <button onClick={onBtnClick}>子组件</button>;
};

原因

父组件状态的变更没有引起该子组件中的onBtnClick重新生成,导致方法中的 val 为一开始传入的数值0

解决方法

想办法触发组件刷新,使onBtnsClick 中打印的 val 永远是最新的值

方法一、去掉 useCallback, 这样每次父组件触发刷新,就会刷新子组件
// 如果点击的事件不会导致父组件刷新,从而刷新子组件
const onBtnClick = _.debounce(onClick, 1000, {leading: true,trailing: false,
});

但这种方式只适用于一种情况:点击事件的处理不会导致父组件刷新;
如果父组件刷新,就会导致子组件刷新,从而 debounce 又新建,导致防抖无效。

如果想父组件刷新,子组件不刷新,可以父组件函数onBtnsClickuseCallback包裹,Child组件用memo包裹
完整代码如下:

const Test: React.FC = () => {const [val, setVal] = useState(0);const onBtnsClick = useCallback(() => {console.log(val);setVal(val => val + 2)}, [val]);return (<div>{val}<button onClick={() => setVal(val => val + 1)}>加一</button><Child onClick={onBtnsClick} />);
};const Child = memo(({ onClick }) => {const onBtnClick = _.debounce(onClick, 1000, {leading: true,trailing: false,});return <button onClick={onBtnClick}>子组件</button>;
});
方法二、或者通过监听 val,val 值改变来刷新函数
const onBtnClick2 = useCallback(_.debounce(onClick, 1000, { leading: true, trailing: false }),[val]
);
方法三、在父组件中,把 val 作为 key 值,每次 val 变化强制触发更新

这个改动是最小的

<Child key={val} onClick={onBtnsClick} />// 或者
<div key={val}><Child  onClick={onBtnsClick} />
</div>

http://www.mrgr.cn/p/65757281

相关文章

二叉树相关的三个常见算法题

算法题一// 计算一颗二叉树的所有节点的数量 int BinaryTree_CountNode(Tnode_t *root) {int n1, n2;if (NULL == root){return 0;}n1 = BinaryTree_CountNode(root->lchild);n2 = BinaryTree_CountNode(root->rchild);return n1 + n2 + 1; }算法题二// 计算一颗二叉树的…

多输入多输出 | Matlab实现WOA-LSSVM鲸鱼算法优化最小二乘支持向量机多输入多输出预测

多输入多输出 | Matlab实现WOA-LSSVM鲸鱼算法优化最小二乘支持向量机多输入多输出预测 目录 多输入多输出 | Matlab实现WOA-LSSVM鲸鱼算法优化最小二乘支持向量机多输入多输出预测预测效果基本介绍程序设计往期精彩参考资料 预测效果 基本介绍 Matlab实现WOA-LSSVM鲸鱼算法优化…

物联网D1——建工程,配环境,注意事项

1.STLink、JLink、USB等驱动配置keil环境配置——下载芯片对应型号的包——导入库函数源文件、Core内核文件、对应芯片系统文件。 2.学会看芯片手册 3.在STM32微控制器中&#xff0c;CRH通常指的是控制寄存器高位&#xff08;Control Register High&#xff09;。 在这种情况下…

金汇龙王战神程序智慧管家app拨号精灵下载说明

金汇战神程序App下载,龙王程序app,智慧管家下载安装 厂家售后使用说明及安装教程:金汇战神系金汇科技出品战神程序,无区域限制,高性价比高,调试安装更加快捷方便,安装时间大大缩短。添加微心 ZSMJCC 咨询索取金汇相关App下载链接 手机上安装好金汇战神小精灵app后,连接上…

202209青少年软件编程(Python) 等级考试试卷(一级)

第 1 题 【单选题】 表达式 len(“学史明理增信 , 读史终生受益”) > len(" reading history will benefit you ") 的结果是? ( ) A :0 B :True C :False D :1 正确答案:C 试题解析: 第 2 题 【单选题】 在 turtle 画图中, 常常使用 turtle.color(co…

Prometheus+Grafana多方位监控

PrometheusGrafana多方位监控 契机 ⚙ 最近发现火山引擎有托管的Prometheus,可是当前是邀测阶段。并且发现火山云的ECS是自带开机自启的exporter的。刚好需要搭建一套服务器监控&#xff0c;所以研究了一套Prometheus监控&#xff0c;包含linux主机监控nginx监控es监控rabbitM…

Flink checkpoint 源码分析- Checkpoint barrier 传递源码分析

背景 在上一篇的博客里&#xff0c;大致介绍了flink checkpoint中的触发的大体流程&#xff0c;现在介绍一下触发之后下游的算子是如何做snapshot。 上一篇的文章: Flink checkpoint 源码分析- Flink Checkpoint 触发流程分析-CSDN博客 代码分析 1. 在SubtaskCheckpointCoo…

Go协程的底层原理(图文详解)

为什么要有协程 什么是进程 操作系统“程序”的最小单位进程用来占用内存空间进程相当于厂房&#xff0c;占用工厂空间 什么是线程 进程如果比作厂房&#xff0c;线程就是厂房里面的生产线&#xff1a; 每个进程可以有多个线程线程使用系统分配给进程的内存&#xff0c;线…

【python的魅力】:教你如何用几行代码实现文本语音识别

文章目录 引言一、运行效果二、文本转换为语音2.1 使用pyttsx32.2 使用SAPI实现文本转换语音2.3 使用 SpeechLib实现文本转换语音 三、语音转换为文本3.1 使用 PocketSphinx实现语音转换文本 引言 语音识别技术&#xff0c;也被称为自动语音识别&#xff0c;目标是以电脑自动将…

电脑是组装的好还是原装的好?

组装电脑和原装电脑孰优孰劣一直备受争议。困扰着无数人的问题:组装电脑和原装电脑到底哪个更出色?下面php小编新一将为您详细介绍这两者的优缺点,帮助您做出明智的选择。继续阅读,探索组装电脑的灵活性、升级潜力和性价比,以及原装电脑的稳定性、保修和简便性。电脑是组装…

32.Docker认识

Docker介绍 Docker是一个快速交付应用&#xff0c;运行应用的技术。 1.可以将程序、依赖、运行环境一起打包为一个镜像&#xff0c;可以迁移到任意Linux操作系统。 2.运行时利用沙箱机制行程隔离容器&#xff0c;各个应用互不干扰。 3.启动、移除都可以通过一行命令完成&am…

【深耕 Python】Quantum Computing 量子计算机(1)图像绘制基础

一、绘制静止图像 使用matplotlib库绘制函数图像y sin(pi * x): import math import matplotlib.pyplot as pltx_min -2.0 x_max 2.0N 1000x1 [] y1 []for i in range(N 1):x x_min (x_max - x_min) * i / Ny math.sin(math.pi * x)x1.append(x)y1.append(y)plt.xl…

OpenCV(一) —— OpenCV 基础

1、OpenCV 简介 OpenCV&#xff08;Open Source Computer Vision Library&#xff09;是一个基于 BSD 许可开源发行的跨平台的计算机视觉库。可用于开发实时的图像处理、计算机视觉以及模式识别程序。由英特尔公司发起并参与开发&#xff0c;以 BSD 许可证授权发行&#xff0c…

小程序wx.getlocation接口如何开通?

小程序地理位置接口有什么功能&#xff1f; 随着小程序生态的发展&#xff0c;越来越多的小程序开发者会通过官方提供的自带接口来给用户提供便捷的服务。但是当涉及到地理位置接口时&#xff0c;却经常遇到申请驳回的问题&#xff0c;反复修改也无法通过&#xff0c;给的理由…

python交教程4:文件操作

文件操作流程 人类操作一个word流程: 1、找到文件、双击打开 2. 读或修改 3. 保存&关闭 ⽤python操作⽂件也差不多: 只读模式 创建模式 追加模式 遍历文件 图片视频--二进制文件 其他方法 打开文件--混合模式

Go Web开发【xorm 框架】

1、xorm 1.1、xorm 简介 xorm 是一个简单而强大的Go语言ORM库. 通过它可以使数据库操作非常简便。 特性 支持 struct 和数据库表之间的灵活映射&#xff0c;并支持自动同步事务支持同时支持原始SQL语句和ORM操作的混合执行使用连写来简化调用支持使用ID, In, Where, Limit,…

Gateway结合Nacos使用!!!

一、本地结合使用 1. 引入依赖 <dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId> </dependency> 2. bootstarp.yml配置文件 如果Nacos中配置使用yaml格式&…

内联函数、引用、汇编

内联函数内联函数是一种特殊的 C++ 函数,编译器会将它的代码直接插入到调用它的位置,而不是像普通函数那样进行函数调用。这可以减少函数调用的开销,从而提高性能。#include <iostream> using namespace std;int func(int v1, int v2) {return v1 + v2;}inline int fu…

解析mysql奇葩语句

首先看看完整的表如下图那么看看一个比较奇葩的语句select * from users where name = aa=bb这个语句为啥能执行成功以及为什么打印出了除了两个aa之外的所有行数据呢。我们来解释一下原理。 当我们使用 where 语句的时候, where是会一行一行的匹配的 ,同时where的执行顺序是…