使用useRef遇到的一个小问题

最新推荐文章于 2024-05-31 17:40:50 发布
最新推荐文章于 2024-05-31 17:40:50 发布
阅读量2.1k 收藏
点赞数
文章标签： react javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43484007/article/details/124889594
版权

问题

开发中遇到一个了一个需求，在某个固定大小的容器中，滚动获取资源。
在这里插入图片描述
那么意味着我需要获取这个容器各种高度，好判断是否发送请求
在这里插入图片描述

同时，我用useRef绑定到那个容器中
在这里插入图片描述
在这里插入图片描述
然后在useEffect()中发送请求，以及给ulDOM一个滚动的监听事件
在这里插入图片描述
当时看到useEffect里面的return 给了一个警告，没太在意。
问题来了！由于useEffect的特点，这种移除监听事件是有问题的，后续这个ulDOM可能为null;
然后报错ComConduct.tsx:59 Uncaught TypeError: Cannot read properties of null (reading ‘removeEventListener’

解决办法

解放方法挺简单的，我们用一个变量存储ulDOM就行了。
在这里插入图片描述
这样就可以避免ref所绑定的对象为null的情

不点外卖
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决TypeError: Cannot read properties of null (reading ‘xxx‘)的错误
念兮为美
03-14 7万+
解决TypeError: Cannot read properties of null (reading ‘xxx‘)的错误.
开发随笔: useRef获取之前状态以及useEffect的坑小记
qq_24724109的博客
01-20 8449
16. useEffect中的坑以及利用useRef记录之前的状态 1. 场景描述 用法在使用useEffect这个hooks的时候，我们通过会通过给他增加一个依赖项，来完成当某个或某些依赖发生改变的时候，完成一些副作用的操作，其正常用法如下: import React, { useEffect, useState } from "react"; import "./styles.css"; c...
深入理解并解决Uncaught TypeError: Cannot read properties of null“的全面指南“
热门推荐
奇妙的Bug之旅
11-10 8万+
在JavaScript中，当你试图访问一个null或undefined对象的属性时，就会抛出这个错误。例如，如果你有一个变量x，它的值为null，然后你尝试访问x.property，就会得到"Uncaught TypeError: Cannot read properties of null"的错误。在使用任何变量之前，都应该先检查它是否已经定义。你可以使用typeof操作符来检查一个变量的类型。// 访问x的属性。
Cannot read properties of null (reading ‘ xxx ‘ )的解决
weixin_48104862的博客
08-11 6万+
根据getElementById 的属性知道，他读到的是html中 标签的id ，此处报错说明我没有这个名为 tno 的Id ,所以根据这里我发现我在所需要的绑定标签中，给他的id = "type "
解决Uncaught TypeError: Cannot read properties of null错误
最新发布
weixin_48683052的博客
05-31 3216
当在编写JavaScript代码时，经常会遇到Uncaught TypeError: Cannot read properties of null错误。本文将介绍这个错误的原因、常见的解决方法以及如何避免它的发生。
提示错误Cannot read properties of null (reading ‘value‘)
m0_67402125的博客
03-02 5994
出现这个错误，是因为把id获取错误，改过来便可。 <input type="text" id="txt"> var txt = document.getElementById("text");// txt写成text <body> <p> <input type="text" id="txt"> <button id="btnAdd">添加</button> </p>
错误解决：Uncaught TypeError: Cannot read properties of null (reading ‘XXX‘).
m0_56426418的博客
04-16 1万+
我想既然显示 username 中的值为 null 就说明 session 大概率没有保存用户登录后的信息，既然没有信息那么大概率与控制层有关。当编写完接口中的方法，实现类中进行实现的时候，个人往往喜欢通过快捷方式重写实现接口中的方法，而这时加载出的方法默认会返回 null。报错意思大概就是你需要的这个 “username” 属性的值本来就是空的，所以无法获取到它的值。这里的目的是打开特定页面后，自动将用户登录后 session 中保存的 username 取出并将值赋给<input>标签。
react-TeleportReact组件在同一个React树中
08-14
在上述代码中，我们创建了一个`Modal`组件，并利用`useRef`和`useEffect`来管理与`<React.Teleport>`相关的DOM操作。`Modal`的内容被`<React.Teleport>`组件包裹，其渲染位置由`to`属性决定，即`teleportRef.current...
ReactNativeWebPlayground:一个React Native Web应用程序，其中包含许多其他内容和具有挑战性的UI
05-29
总之，React Native Web Playground提供了一个丰富的学习资源，帮助开发者掌握React Native for Web的开发技巧，同时也鼓励他们通过实践来解决具有挑战性的UI问题。无论是初学者还是经验丰富的开发者，都可以在这个...
【JavaScript源代码】React 小技巧教你如何摆脱hooks依赖烦恼.docx
12-29
为了解决第一个问题，可以考虑使用`useRef`来存储`otherValue1`和`otherValue2`的值，这是因为`useRef`的引用不会在组件重新渲染时发生变化，因此可以在`useEffect`的回调函数中安全地使用这些值而不用担心引用问题...
Hooks 被 React 推广为解决以下问题的一种方法： 帮助在组件之间重用有状态的逻辑 在复杂组件中按功能组织代码 在功能
05-07
Owl是一个与React Hooks相关的框架，它提供了更广泛的钩子功能，特别是对于类组件的支持。Owl Hooks不仅解决了React Hooks的目标问题，还强调了响应式编程的概念。Owl是基于Hook的响应式系统，这意味着它可以自动...
Javascript-Interview-Preparation:此存储库包含 javascript 面试准备问题和解决方案
07-24
本资源“Javascript-Interview-Preparation”提供了一个全面的指南，包含了JavaScript面试中可能遇到的问题及相应的解决方案。 1. **变量与数据类型** - JavaScript支持动态类型，即变量可以存储不同类型的值，如`...
react create-react-app v5 配置路由(报错及注意事项)
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
09-27 1251
react create-react-app 配置路由报错(Uncaught TypeError: Cannot read properties of null (reading 'useRef'))
简析 JavaScript报错: Uncaught TypeError: Cannot read properties of null (reading ‘...‘) at new
Henry13133333的博客
10-29 2万+
JS报错（如下图）： 报错原因：引入JS的位置错误。 为什么位置错误？ ∵ JS 在页面渲染（生成）之前就执行了代码，发现获取不到页面元素。 解决方法 放到页面代码下面（body内部或者下部 随意吧） ...
解决TypeError: Cannot read property ‘_vueTypes_name‘ of null
MiLan_1的博客
09-11 4455
控制台报错信息： 错误原因： 根据第一行警告信息：value “undefine” should be of type “Array”，可以知道 某个值应该是"Array"类型的，结果是"undefined" 解决办法： 找到应定义为数组类型的值，如果可能为空就加上空判断 ...
Cannot read properties of null (reading ‘insertBefore‘) at insert (runtime-dom.esm-
qq_47099087的博客
05-22 2139
Cannot read properties of null (reading 'insertBefore')
解决 Cannot read properties of null (reading ‘disabled‘)报错
无理. 的博客
10-14 6497
在Vue + elementUI 后台项目里遇到了一个问题，所有模块的的下拉Select 和时间选择器DataPicker (可能还有其他组件) ，在选择后点击页面其他地方都不会自己收起。打开控制台会发现报错了，每点击一次，错误+1.代码里全局搜索 el-dropdown ，el-dropdown下缺少 el-dropdown-menu 元素，如果元素上有 v-if 改成 v-show。
Cannot read properties of null (reading ‘userHead‘)
qq_33240556的博客
02-05 667
在实际开发场景中，可能是数据从服务器返回、DOM元素获取或其他来源没有成功获得预期的对象，所以需要对这种情况进行防御性编程，避免因为空引用引发错误。这个错误信息 “Cannot read properties of null (reading ‘userHead’)” 表示你正在尝试访问一个。在 JavaScript 或其他支持类似语法的语言中，当试图读取或操作未定义或者值为。的对象的属性时，就会抛出这种 TypeError。要解决这个问题，你需要确保在访问。
简析 JavaScript报错 Uncaught TypeError Cannot read properties of null (reading ‘...‘) at new
m0_67392182的博客
03-10 3万+
JS报错（如下图）： 报错原因：引入JS的位置错误。 为什么位置错误？ ∵ JS 在页面渲染（生成）之前就执行了代码，发现获取不到页面元素。 解决方法 放到页面代码下面（body内部或者下部 随意吧） ...
rn useRef如何使用
09-22
在React Native中使用useRef，你可以按照以下步骤进行操作： 1. 首先，在你的组件顶层导入React和useRef函数：import React, { useRef } from 'react'。 2. 在组件函数内部调用useRef函数，并传入初始值作为参数：const pNum = useRef(0)。 3. 现在，你可以在组件中使用pNum.current来访问和修改ref的值，例如：pNum.current = 10。 4. 由于useRef返回的是一个可变的对象，所以对pNum.current的修改不会触发React的重新渲染机制，这使得ref成为一个存储不影响组件视图输出的信息的理想选择。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值