React 搜索时遇到的坑

news2024/12/24 3:02:22

一、业务场景:
最近在优化React的天枢项目里面,搜索时遇到了一些问题。为了大家后面遇到和我一样的问题,给大家分享一下

二、问题描述:
1.点击搜索按钮,报以下错误。

TypeError: Converting circular structure to JSON
–> starting at object with constructor ‘HTMLSpanElement’
| property ‘parser’ -> object with constructor ‘FiberNode’
— property ‘socket’ closes the circle

主要原因是参数传过去,打印出来一直显示事件对象,并不是传过去的值(不能传参,只能用useRef全局定义并接收
在这里插入图片描述
解决方案

   <Button type='primary' onClick={Search}>查询</Button> //这里传会一直调接口
//条件搜索
  function Search() {
    getConfigList(
      {
        isShelf:isShelf.current ,  //就用全局来接,不传值
      }
    ).then( (res)=> {
    })
      .catch(function (error) {
        console.log(error);
      })
  }

2.点击radio组件时,需要点击两次才生效

主要原因是参数没传过去,打印出来一直显示事件对象(不能用
const [isShelf, setIsShelf] = useState(undefined)来定义
只能用useRef和current来操作

  const handleHotText = (i: number) => {
    setCurrentIndex(i)
    console.log(currentIndex)
// 全部
    if (i == 0) {
      // setIsShelf()            //不能用setIsShelf
      isShelf.current = null
      Search()
    } else if (i == 1) {
        // setIsShelf(1)  //不能用setIsShelf
      isShelf.current = 1
        Search()
    } else if (i == 2) {
      // setIsShelf(0)  //不能用setIsShelf
      isShelf.current = 0
      Search()
    }
  }

三、效果展示:
const isShelf = useRef(null);
getConfigList(
{
isShelf:isShelf.current ,
pageNum:pageCode.current,
pageSize:bannerSize.current
}
).then( (res)=> {
console.log(res)
}) .catch(function (error) {
console.log(error);
})

你已经成功了,撒花。
今天的分享到此结束,欢迎小伙伴们一起交流

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/424860.html

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

相关文章

全景丨0基础学习VR全景制作,平台篇:如何从素材库发布VR漫游

大家好欢迎观看蛙色平台使用教程 大家可以将创建作品理解成搭建房子&#xff0c;建房子需要基础的砖块、木头、钉子等原材料&#xff0c;房子成品是多种原材料的有机组合&#xff0c;而蛙色VR平台在创建作品前&#xff0c;也需要先准备对应的基础原材料。当前蛙色VR素材上传类型…

C++实现前缀树

文章目录1. 什么是前缀树2. 前缀树的实现2.1 前缀树的基本结构2.2 插入2.3 word出现了几次2.3 word作为前缀出现几次2.4 删除1. 什么是前缀树 假设这里有一个字符串数组&#xff0c;和一个树的根结点&#xff1a; 这个结点的pass意思是&#xff1a;有几个字符通过了这个结点。…

Golang中是否可以无限开辟协程以及如何控制协程的数量?

文章目录1. Golang中是否可以无限开辟协程&#xff1f;2. 不控制goroutine数量引发的问题3. 如何控制goroutine的数量&#xff1f;⭐️3.1 只用有buffer的channel3.2 channel与sync同步组合方式3.3 利用无缓冲channel与任务发送/执行分离方式1. Golang中是否可以无限开辟协程&a…

腾讯轻联中多维表记录id是什么?如何获取记录id?

在腾讯文档智能表、金山轻维表、维格表需要去【更新表格数据】的时候&#xff0c;经常会需要输入记录id&#xff08;英文record id&#xff09;&#xff0c;很多用户也会有疑问&#xff0c;什么是记录id&#xff0c;如何获取记录id等。 金山、维格表、腾讯文档的记录ID是什么&a…

字节跳动CVPR 2023论文精选来啦(内含一批图像生成新研究)

计算机视觉领域三大顶会之一的 CVPR 今年已经开奖啦。 今年的 CVPR 将于六月在加拿大温哥华举办&#xff0c;和往年一样&#xff0c;字节跳动技术团队的同学们收获了不少中选论文&#xff0c;覆盖文本生成图像、语义分割、目标检测、自监督学习等多个领域&#xff0c;其中不少…

[ROC-RK3568-PC] [Firefly-Android] 10min带你了解Camera的使用

&#x1f347; 博主主页&#xff1a; 【Systemcall小酒屋】&#x1f347; 博主追寻&#xff1a;热衷于用简单的案例讲述复杂的技术&#xff0c;“假传万卷书&#xff0c;真传一案例”&#xff0c;这是林群院士说过的一句话&#xff0c;另外“成就是最好的老师”&#xff0c;技术…

SVN利用 AS 进行代码对比的方法

第 1 种&#xff1a;如果我们是从 SVN 检出的项目&#xff0c;并且想比较本地代码与从 SVN 检出时的代码相比都有那些区别&#xff0c;可以按如下步骤操作 如上图所示&#xff0c;在代码编辑区&#xff0c;右键唤出功能菜单&#xff0c;然后选择Subversion&#xff0c;进而会展…

沉浸式翻译 – 支持 PDF、EPUB、网页,可同时显示原文与译文的双语翻译工具

使用的理由 自从谷歌翻译不再对大陆用户提供服务后。内心是一阵酸痛的&#xff0c;毕竟我认识单词单词不认识我啊&#xff0c;这简直是天书一般的存在。 期间网络中的很多大神也是推荐了不少方法让我再次拥抱谷歌翻译&#xff0c;比如教我修改 host 文件什么的&#xff0c;但这…

谁能真正替代你?AI辅助编码工具深度对比(chatGPT/Copilot/Cursor/New Bing)

写在开头 这几个月AI相关新闻的火爆程度大家都已经看见了&#xff0c;作为一个被裹挟在AI时代浪潮中的程序员&#xff0c;在这几个月里我也是异常兴奋和焦虑。甚至都兴奋的不想拖更了。不仅仅兴奋于AI对于我们生产力的全面提升&#xff0c;也焦虑于Copilot等AI辅助编码工具&am…

VUE3 学习笔记(八-1)中 EasyUI 组件的使用方法

目录 一、首先看官方 Accordion 文档说明 二、如何使用 Props 属性 三、如何使用 Methods&#xff08;方法&#xff09; 四、如何使用Methods&#xff08;方法&#xff09; 1. 通过 ref 给Vue3中的标签添加引用 2. 在script setup lang"ts"中定义变量引用 3. 增…

全面剖析OpenAI发布的GPT-4比其他GPT模型强在哪里

最强的文本生成模型GPT-4一、什么是GPT-4二、GPT-4的能力三、和其他GPT模型比较3.1、增加了图像模态的输入3.2、可操纵性更强3.3、复杂任务处理能力大幅提升3.4、幻觉、安全等局限性的改善3.6、风险和缓解措施改善更多安全特性3.7、可预测的扩展四、与之前 GPT 系列模型比较五、…

边缘计算那些事儿—边缘智能技术

0 背景 边缘智能是边缘计算中一个非常重要的方向。它将边缘计算和人工智能算法结合起来&#xff0c;在边缘设备上就近处理目标检测、物体跟踪&#xff0c;识别等任务。这种处理方式可以降低时延&#xff0c;减少数据上送云端对回传网络的冲击&#xff0c;同时保证数据的隐私和安…

「线性DP-步入」最大子串和

最大子串和 题目描述 给你一个整数数组 nums &#xff0c;请你找出一个具有最大和的连续子数组&#xff08;子数组最少包含一个元素&#xff09;&#xff0c;返回其最大和。 子数组 是数组中的一个连续部分。 样例 输入&#xff1a;nums [-2,1,-3,4,-1,2,1,-5,4] 输出&…

计算机组成原理第五章输入输出系统---概述笔记

我们都知道,外部设备和计算机是不能直接相连的,因为设备是多种多样的&#xff0c;都是通过一个接口设备和主存相连的&#xff0c;主机对外部设备有两种控制方式&#xff0c;程序查询方式和程序中断方式&#xff0c;第三种是DMA方式&#xff0c;这三种方式都是从CPU工作效率的角…

HTML表单和CSS属性以及DOM实现网页版计算器

目录 1、效果展示 2、源码 2.1HTMLCSS源码 2.2JS源码 3、CSS属性 3.1width、height属性 3.2font-size属性 3.3margin属性 3.4padding属性 3.5background-color属性 3.6border属性 3.7border-radius属性 3.8text-align属性 4、DOM 4.1根据id获取元素 4.2根据nam…

06 - 深度学习处理器原理

一、通用计算机架构 1. 冯诺依曼架构 冯诺依曼架构的特点:(1)使用存储程序的概念,即数据和指令都存储在内存中;(2)由 CPU、内存、输入/输出设备和总线组成,其中 CPU 包括控制单元、算术逻辑单元和寄存器;(3)控制单元按照取指(Fetch)- 译码(Decode)- 执行(Exec…

IM即时通讯-7-如何设计通知提醒

本文大纲 本文从为什么做通知提醒&#xff0c; 以及如何设计通知提醒&#xff0c; 以及如何衡量通知提醒三方面解释了如何设计通知提醒。 对于重点的如何设计通知提醒&#xff0c; 通过拆分前台和后台&#xff0c; 前台采用自建或者二方通道&#xff0c; 后台采用厂商信令通道…

电厂人员定位怎么做?智慧电厂人员定位系统解决方案告诉你答案

伴随着“泛在电力物联网建设”的提出&#xff0c;构建智慧电厂引起重大关注&#xff0c;全国各地纷纷响应。传统电力企业一直面临着人员管控难、生产环境复杂且危险多等问题&#xff0c;物联网技术的兴起使得电厂的数字化和智慧化转型已成为电力企业保障生产作业安全、提升生产…

工具及方法 - Linux下串口工具Minicom

因为调试设备所以需要打开两个串口&#xff0c;也许是开了Ubuntu虚拟机的影响&#xff0c;或其他的问题&#xff0c;经常有一个或两个串口设备工作不正常&#xff0c;需要重启电脑&#xff0c;很麻烦。 原因大概就是设备驱动问题&#xff0c;比如使用MobaXterm这个工具&#x…

基于NXP iMX8M Mini处理器测试DPDK

By Toradex秦海 1). 简介 DPDK (Data Plane Development Kit) 软件是一组用户空间库和驱动程序&#xff0c;可加速在所有主要 CPU 架构上运行的网络数据包处理工作负载&#xff0c;以便提升整个网络数据服务的QoS。其最早由 Intel 大约 2010年创建&#xff0c;后由6WIND公司发…