react hooks无法获取到最新值问题

2023-11-12

无法获取最新值的写法:

  1. 在state中定义初始值:
import React, {useState, useEffect} from "react";
 const [type, setType] = useState(0);
  1. 通过setType方法修改type:
<div onClick={()=>setType(1)}>
  1. 在当前组件中—— 能正常获取到 type最新值
  2. 将type传入子组件中操作——子组件获取不到最新值

解决方法:
一、
通过 useEffect() 触发

  1. 在原上述逻辑基础上,新增:
  useEffect(() => {
    setType(type);
  }, [type]);

监测当type值发生改变时,设置一次

  1. 通过 useRef() 执行

import React, {useState, useEffect, useRef} from "react";
const typeRef = useRef(0);

const setTypeByRef = () =>{
	typeRef.current = 1
}

<div onClick={setTypeByRef}>
  1. typeRef.current 就是最新的 typeRef 值
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

react hooks无法获取到最新值问题 的相关文章

  • Facebook 自定义故事与大图像 - 使用 Javascript 打开图

    我正在尝试创建一个自定义故事 每次有人尝试发布它时都会有一个新图像 现在我创建了一个对象 以及将两者结合起来的动作和故事 我想要实现的是一个看起来像这样的故事https fbcdn dragon a akamaihd net hphotos
  • React Native TypeError:无法读取未定义的属性“createClient”

    我是 React 本机框架的新手 我使用 create react native app AwesomeProject 创建了应用程序 我想在我的项目中使用 BLE 因此我安装了 react native ble plx 模块 但是当我创建
  • 尝试注册 RCTBridgeModule 类 RCTFileReaderModule

    尝试为名称 FileReaderModule 注册 RCTBridgeModule 类 RCTFileReaderModule 但该名称已由类 FileReaderModule 注册 尝试使用命令react native run ios在i
  • 用于传输命名参数和正文的云端点资源属性不起作用

    我正在尝试通过gapi client rpc调用实现对谷歌云端点的调用 如文档中所述 和Google Cloud Endpoints 使用 JS 客户端进行调用 传递参数和 JSON 正文 https stackoverflow com q
  • 如何解构 React props 并仍然访问其他 props?

    我很好奇如果我想要所有的 props 但也想要解构单个属性 那么组件的参数 props 是否可以像导入一样解构 我想这更像是一个 JavaScript 问题 而不是一个 React 问题 但是举个例子 import React useEff
  • 三.js环境光意想不到的效果

    在下面的代码中 我渲染了一些立方体并使用点光源和环境光照亮它们 然而 当设置为 0xffffff 时 AmbientLight 会将侧面的颜色更改为白色 无论其指定的颜色如何 奇怪的是 点光源按预期工作 我怎样才能使环境光表现得像点光 因为
  • 如何在美人鱼节点描述中添加链接?

    我想 如下图所示 div class mermaid graph TD A hello B an b important b link A gt B div 在下面添加实际链接link指向http google com 我尝试将相关节点修改
  • 如何在 Angular 2 应用程序中使 DateAdapter 单例?

    我正在开发一个带有延迟加载模块的 Angular 7 应用程序 我也使用有角度的材料组件 我想在日期选择器组件中本地化并支持多个区域设置 当应用程序语言发生变化时 我想在整个应用程序中全局更改它 可以通过 DateAdapter setLo
  • 在 JQuery ui 自动完成中显示图像

    我有一个带有 JQuery ui 自动完成功能的脚本 可以完美运行 有一个显示用户名字和姓氏的搜索过程 但在我的数据库中 还有用户的图片 我想将其显示在带有名字和姓氏的建议中 数据库中pic包含图片url 剧本 function searc
  • 动态更改 vuejs 2 中的选择输入选项

    如何动态更改选择下拉 v model 中的选项 我有 2 个选择输入 其中一个应该根据其他输入进行更改 例如 如果我选择 水果 则选择显示水果 如果我选择 蔬菜 则选择显示蔬菜 我不使用Vuejs 但查看文档后 var TypesArr F
  • Intro.js 2页然后返回首页

    我在用intro js http introjs com 为我的网站创建一个小介绍 我希望游览从第 1 页 主页 2 另一页 然后回到第 1 页 主页 我已经成功地从第 1 2 页开始 但不确定如何让它返回到第 1 页 我对 javascr
  • Angularjs - 将 True/False 显示为 Yes/No

    有没有一种简单的方法可以将真 假值显示为是 否 我正在从数据库检索包含以下内容的 JSON 对象 对象 WithCertification true 这是 HTML 有认证 elem WithCertification 正在显示这个 认证真
  • Gmail 和 Google Chrome 12+ 中的“从剪贴板粘贴图像”功能如何工作?

    我注意到一个来自 Google 的博文 http gmailblog blogspot com 2011 06 pasting images into messages just got html其中提到 如果您使用的是最新版本的 Chro
  • 可选回调的 JavaScript 样式

    我有一些函数偶尔 并非总是 会收到回调并运行它 检查回调是否已定义 函数是一种好的风格还是有更好的方法 Example function save callback do stuff if typeof callback undefined
  • 如何使用 jest 通过 Promise.all 设置多次提取测试

    我在测试中使用 jest 我正在使用 React 和 Redux 并且执行以下操作 function getData id notify return dispatch gt dispatch anotherFunction Promise
  • 适用于多应用项目的 Grunt 和 requirejs 优化器

    我在让 Grunt 对具有以下结构的项目执行 requirejs 优化时遇到问题 static js apps app js dash js news js many more app files build collections lib
  • 什么是 TinyMCE jQuery 包?

    我被要求在项目中使用 TinyMCE 编辑器 在下载页面上 有一个主包 然后是一个 jQuery 包 This package contains special jQuery build of TinyMCE and a jQuery in
  • 动态 dom 操作后,如何在浏览器历史记录中保留 dom 状态?

    是否有一个通用的解决方案来保留 dom 状态 以便当用户使用后退 前进返回页面时 整个页面处于他们离开时的确切状态 这篇文章询问并回答了为什么不同浏览器和不同 javascript 库的行为不一致 Ajax 后退按钮和 DOM 更新 htt
  • 如何解决此错误“不要使用对象作为类型”?

    我不明白这个错误消息造成的 我的组件有两个和一个包含对象的数据数组 我收到一条错误消息 不要使用object作为一种类型 这object类型目前很难使用 我该如何解决它 我附加了数组包含对象的数据 first tsx import data
  • JavaScript 正则表达式两个标签之间的多行文本

    我编写了一个正则表达式来从 HTML 中获取字符串 但似乎多行标志不起作用 这是我的模式 我想将文本输入h1 tag var pattern div class box content 5 h1 lt lt h1 gt mi m html

随机推荐

  • Ubuntu安装qt-opensource-linux-x64-5.11.1教程

    登陆qt官方下载页面 http download qt io archive qt 本文以安装qt opensource linux x64 5 11 1为例 把下载好的qt opensource linux x64 5 11 1 run放
  • node.js多版本管理nvm安装、切换、443问题等

    一 背景 线上环境出现问题 前端小哥本地编译不通过需要帮其看一下具体原因 由于我本地的node版本时16 3 0 项目编译需要v14 19 3 由于不同的项目支持的node版本不同 此时需要一个node多版本的管理工具 这是需要nvm管理n
  • 腾讯云直播工具类

    Maven 腾讯云直播
  • Port 1-1023

    Port Protocol 0 Reserved 1 TCPMUX TCP Port Service Multiplexer 2 Management Utility 3 Compression Process 4 5 Remote Job
  • LeetCode 剑指 Offer 34. 二叉树中和为某一值的路径

    输入一棵二叉树和一个整数 打印出二叉树中节点值的和为输入整数的所有路径 从树的根节点开始往下一直到叶节点所经过的节点形成一条路径 示例 给定如下二叉树 以及目标和 sum 22 5 4 8 11 13 4 7 2 5 1 返回 5 4 11
  • 刷题之轮转数组

    给你一个数组 将数组中的元素向右轮转 k 个位置 其中 k 是非负数 示例 1 输入 nums 1 2 3 4 5 6 7 k 3 输出 5 6 7 1 2 3 4 解释 向右轮转 1 步 7 1 2 3 4 5 6 向右轮转 2 步 6
  • 如何实现零宕机的配置热加载

    对于高可用的服务 为了保证服务可用性 更新配置时必然不能直接停止服务 可以使用配置热加载来避免服务暂停 不需要重启服务 配置的热加载可以分为两个场景 手动更新与自动更新 手动更新 对于一些临时调试 服务数量不多的情况下 可以进行手动更新配置
  • 外包干了2个月,技术退步明显.......

    先说一下自己的情况 大专生 18年通过校招进入武汉某软件公司 干了接近4年的功能测试 今年年初 感觉自己不能够在这样下去了 长时间呆在一个舒适的环境会让一个人堕落 而我已经在一个企业干了四年的功能测试 已经让我变得不思进取 谈了2年的女朋友
  • 【Tensorflow2.0】11、经典图像CNN模型实现代码

    文章目录 1 Lenet5 2 AlexNet 3 VGG 4 Inception系列 v1到v4 4 1 Inceptionv1 GoogLeNet 4 2 inceptionv2 4 3 inceptionv3 4 4 Inceptio
  • Android快速开发框架-ZBLibrary 源码分享

    坐标标准库ZBLibrary 是一个MVP架构的Android快速开发框架 提供一套开发标准 UI Data Listener 以及模板和工具类并规范代码 封装层级少 简单高效兼容性好 一句代码就可实现全局滑动返回 可重写 集成方便快捷的照
  • matlab练习程序(c/c++调用matlab

    这里的环境是windows7 vs2010 matlabR2010b 上一篇是通过engine来调用matlab中的语句 本篇是通过调用m文件编译成的h lib dll文件而实现的 首先写一个函数mysvd m function s v d
  • docker国内镜像加速

    1 阿里云容器 生成自己的加速地址 登陆地址 https cr console aliyun com 选择自己的系统 2 修改配置文件 针对Docker客户端版本大于 1 10 0 的用户 您可以通过修改daemon配置文件 etc doc
  • Linux防火墙

    安全防御 常见的攻击手段 拒绝服务 已知漏洞 口令破解 欺骗用户 常见的安全防御设备 基础类防火墙 IDS类 入侵检测系统 提供报告 事后分析 IPS类 入侵防御系统 针对数据包分析 根据模式匹配 阻断非法访问 主动安全类 什么是防火墙 工
  • 这篇文章带你读懂IP地址

    这篇文章带你读懂IP地址 一 IP地址介绍 二 IP地址分类及表示 三 IP地址的主要特点 四 特殊IP地址及私有IP地址 一 IP地址介绍 IP地址 全世界唯一的32位 4字节标识符 标识路由器主机的接口 IP地址 lt 网络号 gt l
  • 【Git CMD】Git上传本地代码到远程仓库(6步到位)

    步骤 1 创建指定名称的分支并切换至该分支 2 添加文件到暂存区 3 查看本地仓库和暂存区的状态 4 提交文件到本地仓库 5 查看本地仓库提交的历史 6 将本地当前分支推送到与本地当前分支同名的远程分支 1 创建指定名称的分支并切换至该分支
  • 学习PGL课程:图卷积网络GCN、图注意力网络GAT

    一 GCN 什么是图卷积 不同的地方在于 图像像素点周围的像素个数通常是固定的 而图结构上某个节点周围的节点数是不固定的 图卷积网络计算公式 1 邻接矩阵解释 2 度矩阵 表示节点与之相连节点的个数 包括自环 3 H l 表示第l次迭代的节
  • 具体项目下解决Echarts多端同步开发和维护的问题

    具体问题场景 PC端和移动端需要同时上线图表功能 没有多余工时 之后的版本迭代 功能 样式 配置等 默认双端同步 开发人员只希望维护一套代码 Echarts在移动端有部分功能不兼容不支持 Echarts在移动端的坑 移动端页面使用echar
  • Raspberry Pi使用TinyML运动识别

    我们将使用机器学习来构建在微型微控制器RP2040上运行的手势识别系统 探索Raspberry Pi Pico及其SDK Raspberry Pi Pico是具有灵活数字接口的低成本 高性能微控制器板 主要功能包括 Raspberry Pi
  • C11 : 函数模板 std::function

    目录 std function 定义 实现原理 应用 注意事项 std function 定义 类模板 std function 是一种通用的 多态的函数封装 std function 的实例可以对任何可以调用的目标实体进行存储 复制和调用
  • react hooks无法获取到最新值问题

    无法获取最新值的写法 在state中定义初始值 import React useState useEffect from react const type setType useState 0 通过setType方法修改type div s