防抖处理与useState在一起失效问题

dr努力再努力

于 2024-01-28 17:39:48 发布

阅读量152

点赞数 1

文章标签：前端 javascript react

本文链接：https://blog.csdn.net/qq_51976882/article/details/135898016

版权

文章讨论了在配置搜索框懒加载和防抖功能时遇到的问题，即当自定义方法中的useState状态更新不在防抖回调内时，导致防抖失效。解决方案是将状态更新函数置于防抖回调中以确保其正确执行。

摘要由CSDN通过智能技术生成

问题现象：

搜索框配置了懒加载和防抖处理，输入内容，防抖失效

问题分析：

防抖处理将请求API部分自定义方法进行封装回调，当useState中定义更新状态的方法不在这个回调函数中时会干扰防抖的处理，

解决方案：

将setuseState方法放在防抖的回调函数中即可
示例：
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

dr努力再努力

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
防抖处理与useState在一起失效问题

防抖处理将请求API部分自定义方法进行封装回调，当useState中定义更新状态的方法不在这个回调函数中时会干扰防抖的处理，将setuseState方法放在防抖的回调函数中即可。
复制链接

扫一扫

vue3面试题：2024 最新前端 Vue 3

2401_84437170的博客

04-27

2032

什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。类似于vue2.x中的mixin。自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。

2021-6月面试总结-vue，uniapp，小程序，h5，更新中

shuux666的博客

03-03

671

**一、**vue 2.6.11 vue****页面的生命周期？总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。创建前/后：在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在∗∗created∗∗阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在**created**阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在∗∗cre

参与评论您还未登录，请先登录后发表或查看评论

useState无效

qq_43599049的博客

12-24

2983

正常来讲点击button按钮发生onClick事件，然后重新调用函数返回新的jsx，然后react再通过新旧jsx进行对比来重新渲染。 function App() { const [friends, setFriends] = useState(['tom', 'lucy']) function addFriends() { friends.push('jack'); setFriends(friends) } return ( <div clas

react使用usestate踩坑

秋来九月八

04-22

3万+

usestate的常规用法在react框架中，不适用类组件，使用函数式组件又想自定义数据维护业务开发的时候，就需要使用react提供的hook来完成。usestate就是最常见的一种hook。 const [name,setName] = useState('dx'); setName（'dx1'）中括号实际是一个解构运算，第一个name是设置的值，第二个setName是只能用来改变name...

react useState 更新数组没有生效

最新发布

想象中

08-15

1774

在React中使用useState来更新数组时，需要注意一些细节。由于useState是基于不可变性的原则，直接修改数组的某个元素是不会触发组件重新渲染的。相反，你应该创建一个新的数组副本，并将其传递给useState的更新函数。

React hooks useState set数据失效

Bloxed_shangyc的博客

01-20

3743

2. 执行 addConcatA 数据不会更新，通过执行addConcatB 数据生效，QQ技术交流群：707 196 135 (大前端技术交流群)，原因：目前不是很确定，找到问题再更新。解决方案：通过解构的方式实现。

前端面试100问！！

weixin_42623421的博客

06-19

3596

面试造火箭，工作拧螺丝！在技术圈毕竟只有百分之一的人能进入BAT，百分之九九的小伙伴只能在普通公司做这普通的事情，厌烦哪些标题党，我们抛开那些高大上的台词，回归到面试的本质。本课程帮助小伙伴们快速梳理知识，不会涉及到具体的很细节的知识点，关注面试本身。公司一般会从以下5个方面考察一个人的能力，本课程的100问是总结了最近2-3年常问的面试题，适合初中级前端工程师。 1、HTML(5)和CSS3方面 1.前端与后端数据交互的格式有哪些，为什么大部分现在都用json而不用xml。答：XML：知了堂3岁

关于useState塞入默认值是props传入来却没有生效

zhangzhuo1130的博客

08-10

1217

塞入默认值是从内拿到的时候，会有塞不进去的情况，原因就是第一次props的值为空，

react useState 状态更新失败

qq_33372370的博客

04-22

2426

以下是我更新失败的代码定义的hook状态 const [productList, setProductList] = useState([]); 点击事件，改变数据中enable字段 const onEnable = (row,index) => { const list = productList; list[index].enable = !list[index].enable; setProductList(list); console.log('o

React使用hook（useState）的一些坑

mango的博客

11-28

1万+

import someFnComponent from './someFnComponent' const [fnComponent, setFnComponent] = useState(); setFnComponent(someFnComponent ) //此时引入的函数组件props会失效。当引用时组件的props一直会是undefined。 const myFnCom = ...

React踩坑指南——setState不生效的解决方法

YuqiRealm.com

08-29

2万+

不生效的写法：const theQuery = Object.assign( {}, { id: '', beginDate: '', endDate: '' // 查询条件 }, _query.toJS() ); this.setState(theQuery); action.getRefundList(theQuery)可以生效的写法1：const theQuery = Object

尽量使用 useReducer，不要使用 useState

weixin_33675507的博客

04-23

1万+

原文：useReducer, don't useState 本文难度：入门级别本文默认你已经大概了解过 React Hooks，如果不了解可以先看看 ReactJS 的文档。当开发者们开始在他们的应用中使用 React Hooks API 时，很多人一开始都会把 useState 作为他们的状态管理工具。然而，我强烈认为 useReducer 比 useState 更适合做状态管理。首...

【开始学习React Hook(1)】Hook之useState

weixin_34232617的博客

05-27

1444

react hook是react推出的一种特殊函数。这些函数可以让你在不创建react class的情况下依然可以使用react的一些特性（诸如目前react的钩子函数拥有的所有特性）。最常用的hook有useState, useEffect, 日常开发使用这两个就足够了。如果再懂点useReduer, useCallback, useMemo, useRef, useImperativeHand...

从源码剖析useState的执行过程

weixin_33854644的博客

04-30

3514

长文预警，如果觉得前戏太长可直接从第三章开始看~ 本文基于 React 16.8.6 进行讲解使用的示例代码： import React, { useState } from 'react' import './App.css' export default function App() { const [count, setCount] = useState(0); const...

react Hooks 使用setinterval的一些问题

tovinping的博客

08-04

4358

要先在这里道个歉，因为这篇文章是第二次编辑了。第一次理解的不够好，看了浏览器也有几十个，希望别误导了别人；要看结果直接跳到最后那段代码，这是我的实现方式，应该还有其它的方式我的博客主要是记录工作中遇到的问题，和学习过程中发现的问题，方便以后遇到类似问题，可以快速的在自己博客中找到解决问题的办法，而不是每次都百度，谷歌找个半天。场景：用hooks手机验证码一分钟这内只能发一次代码实现...

antd Modal 结合 Form 使用有时 resetFields 不生效

weixin_40795574的博客

03-26

2516

现象 Form 配合 Modal 使用时 destroyOnClose 会影响 useEffect 的执行，相应的 useEffect 中的一些操作如 resetFields 可能会不生效原因有 destroyOnClose 先执行 useEffect，没有 destroyOnClose 后执行 useEffect 复现示例 demo代码 import React, { useState, useEffect } from 'react'; import ReactDOM from 'react-do

useState使用和原理