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

目录

      • 原因
      • 解决方法
          • 方法一、去掉 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.mzph.cn/pingmian/6250.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Mybatis之Sqlsession、Connection和Transaction三者间的关系

前言 最近在看Mybatis的源码&#xff0c;搜到这篇文章Sqlsession、Connection和Transaction原理与三者间的关系&#xff0c;debug之后发现有不少疑惑&#xff0c;于是按照原文整理了一下&#xff0c;记录下debug中的一些困惑点。 对于我们开发来讲&#xff0c;不管跟任何关系…

django搭建一个AI博客进行YouTube视频自动生成文字博客

文章目录 一、生成Django框架二、项目代码&#xff08;前端&#xff09;1、编写前端代码&#xff08;正文界面&#xff09;1.1、生产html框架1.2、添加live preview扩展1.3、更改title元素中文本1.4、添加CDN&#xff08;CSS&#xff09;样式链接1.5、nav标签1.6、在body标签中…

Python | Leetcode Python题解之第66题加一

题目&#xff1a; 题解&#xff1a; class Solution:def plusOne(self, digits: List[int]) -> List[int]:n len(digits)for i in range(n - 1, -1, -1):if digits[i] ! 9:digits[i] 1for j in range(i 1, n):digits[j] 0return digits# digits 中所有的元素均为 9retu…

手撸Mybatis(三)——收敛SQL操作到SqlSession

本专栏的源码&#xff1a;https://gitee.com/dhi-chen-xiaoyang/yang-mybatis。 引言 在上一章中&#xff0c;我们实现了读取mapper配置并构造相关的mapper代理对象&#xff0c;读取mapper.xml文件中的sql信息等操作&#xff0c;现在&#xff0c;在上一章的基础上&#xff0c…

深度学习:基于TensorFlow、Keras,使用长短期记忆神经网络模型(LSTM)对Microsoft股票进行预测分析

前言 系列专栏&#xff1a;机器学习&#xff1a;高级应用与实践【项目实战100】【2024】✨︎ 在本专栏中不仅包含一些适合初学者的最新机器学习项目&#xff0c;每个项目都处理一组不同的问题&#xff0c;包括监督和无监督学习、分类、回归和聚类&#xff0c;而且涉及创建深度学…

等保测评考试培训题

等保2.0培训考试题目 一、网络安全法第几条&#xff0c;规定国家实行网络安全等级保护制度。 A、第五条 B、第十条 C、第十三条 D、第二十一条 二、等级保护有几个安全保护级别&#xff1f; A、3个 B、4个 C、5个 D、6个 三、什么样的系统可以作为定级对象&#…

UNIAPP小程序从入门到精通

第一章> 1、如何创建项目 2、项目的基本结构 3、页面组成&#xff08;wxss可以不用&#xff09; 4、组件的使用 5、协同开发与发布 第二章> 6、WXML页面结构渲染 7、style样式美化 8、a…

分享我的github仓库

这是一个由现代C编写的小型、学习性质的服务器框架&#xff0c;包含压缩&#xff0c;序列化&#xff0c;IO调度&#xff0c;Socket封装&#xff0c;文件配置&#xff0c;日志库等多个完整自研模块&#xff0c;欢迎到我的仓库阅读代码和安装体验&#xff0c;期待任何的建议和反馈…

Docker 加持的安卓手机:随身携带的知识库(一)

这篇文章聊聊&#xff0c;如何借助 Docker &#xff0c;尝试将一台五年前的手机&#xff0c;构建成一个随身携带的、本地化的知识库。 写在前面 本篇文章&#xff0c;我使用了一台去年从二手平台购入的五年前的手机&#xff0c;K20 Pro。 为了让它能够稳定持续的运行&#xf…

C++, 简单 http 下的 POST 和 Get

#pragma once #include <Windows.h> #include <winsock.h> #include <sstream> #include <iostream> #pragma comment(lib,"ws2_32.lib")class WinHttp { public:WinHttp(){//此处一定要初始化一下&#xff0c;否则gethostbyname返回一直为空…

如何从Mac电脑恢复任何删除的视频

Microsoft Office是包括Mac用户在内的人们在世界各地创建文档时使用的最佳软件之一。该软件允许您创建任何类型的文件&#xff0c;如演示文稿、帐户文件和书面文件。您可以使用 MS Office 来完成。所有Microsoft文档都可以在Mac上使用。大多数情况下&#xff0c;您处理文档&…

手搓堆(C语言)

Heap.h #pragma once#include <stdio.h> #include <stdlib.h> #include <assert.h> #include <stdbool.h> #include <string.h> typedef int HPDataType; typedef struct Heap {HPDataType* a;int size;int capacity; }Heap;//初始化 void Heap…

node.js中的fs模块,读写语法讲解

本文分享node.js的入门知识&#xff0c;使用 fs 模块封装的方法读写文件内容 node中的fs 模块&#xff1a;封装了与本机文件系统进行交互的&#xff0c;方法和属性&#xff0c;使用语法如下&#xff1a; 1、加载 fs 模块&#xff0c;得到 fs 对象 const fs require(fs) 2、…

软件工程习题答案2024最新版

习题一答案 一、选择题 软件的主要特性是(A B C)。 A) **无形 **B) 高成本 C) **包括程序和文档 ** D) 可独立构成计算机系统 软件工程三要素是(B)。 A) 技术、方法和工具 B) 方法、工具和过程 C) 方法、对象和类 D) 过程、模型、方法 包含风险分析的软件工程模型是(A)…

Java注解处理器:自定义注解的自动化处理

引言 在Java编程中&#xff0c;注解&#xff08;Annotation&#xff09;是一种重要的元数据&#xff0c;它为代码提供了额外的信息。注解处理器&#xff08;Annotation Processor&#xff09;是Java编译过程中的一部分&#xff0c;它可以在编译时期读取注解信息并执行特定的处…

深度学习之基于Matlab BP神经网络烟叶成熟度分类

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景 烟叶的成熟度是评估烟叶品质的重要指标之一&#xff0c;它直接影响着烟叶的口感、香气和理化特性。传…

python基础算法题0502

数字反转 无论是字符串反转还是数字反转&#xff0c;其实都一样。 需求 代码 class Solution:def reverse(self, x: int) -> int:if 0 < x < 2 ** 31 - 1:m str(x)[::-1]if int(m)<2**31-1:return int(m)else:return 0if 0 > x > -2 ** 31:y -xn str(y…

uniapp 监听APP切换前台、后台插件 Ba-Lifecycle

监听APP切换前台、后台 Ba-Lifecycle 简介&#xff08;下载地址&#xff09; Ba-Lifecycle 是一款uniapp监听APP切换前台、后台的插件&#xff0c;简单易用。 截图展示 也可关注博客&#xff0c;实时更新最新插件&#xff1a; uniapp 常用原生插件大全 使用方法 在 script…

华为机考入门python3--(19)牛客19- 简单错误记录

分类&#xff1a;字符串 知识点&#xff1a; 分割字符串 my_str.split(\\) 字符串只保留最后16位字符 my_str[-16:] 列表可以作为队列、栈 添加元素到第一个位置 my_list.insert(0, elem) 增加元素到最后一个位置 my_list.append(elem) 删除第一个 my_list.pop(0)…

SAP_SD模块-销售批次策略应用记录

一、销售批次查找策略的重要性 批次查找策略允许企业在销售过程中根据预定义的规则自动选择最适合的产品批次。这种策略的实施&#xff0c;对企业尤其是那些涉及到严格产品质量与安全标准的行业&#xff08;如食品、药品及化工产品&#xff09;具有以下几方面的重要意义&#x…