当前位置: 首页 > news >正文

【antd Col】奇怪的TypeError: Cannot read properties of undefined (reading ‘then‘)

现象

修改antd的Col组件的layouts属性为span后,并通过监听resize事件对span列宽进行动态变化时,报错TypeError: Cannot read properties of undefined (reading ‘then‘)

补充示例一

由于我使用了飞冰ice.js,且在以下过程中写了如下语句,引起了同样的报错!

import { useRequest as useRequestHook } from 'ice';const { data } = useRequest(() => wareHouseModel.data && homeService.getAllFixedAssets(wareHouseModel.data, tenantCode),{manual: false,withFullResult: true,refreshDeps: [wareHouseModel.data],ready: !!tenantCode,},);

关键报错代码:

wareHouseModel.data && homeService.getAllFixedAssets(wareHouseModel.data, tenantCode),

正是因为wareHouseModel.data &&的与逻辑引起了该TypeError: Cannot read properties of undefined (reading ‘then‘)报错,因为如果wareHouseModel.data没有值,会导致返回的是非promise的对象!!!

antd引起该错误的代码示例二

const Home = () => {const [colSpan, setColSpan] = React.useState<number>(12);React.useLayoutEffect(() => {// 自适应每屏显示坐标点数量设置const resizeColSpan = () => {const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;let spanNum = 0;if (+width >= 1415 && +width < 1850) {spanNum = 8;}if (+width >= 1850) {spanNum = 6;}setColSpan(spanNum);};// 初始时需要触发resize,否则会有样式兼容问题resizeColSpan();const onResize = debounce(() => {resizeColSpan();}, 50);window.addEventListener('resize', onResize);return () => {window.removeEventListener('resize', onResize);};}, []);
// ...以下省略部分内容
return ({/* <Col {...layouts} className={`${styles['panel-item']} panel-item`}> */}<Col span={colSpan} className={`${styles['panel-item']} panel-item`}>{React.isValidElement(children) &&React.cloneElement(children as React.ReactElement, {onClick: (actionKey) => handleClick(actionKey, item),hasRemoved: panelList.length >= 3,})}</Col>);

报错原因

由于上面的代码给了一个let spanNum = 0;,默认给0的情况会引起获取不到元素的报错。将其赋值为let spanNum = 12;即可。

相关文章:

【antd Col】奇怪的TypeError: Cannot read properties of undefined (reading ‘then‘)

现象 修改antd的Col组件的layouts属性为span后&#xff0c;并通过监听resize事件对span列宽进行动态变化时&#xff0c;报错TypeError: Cannot read properties of undefined (reading ‘then‘)。 补充示例一 由于我使用了飞冰ice.js&#xff0c;且在以下过程中写了如下语句…...

requests处理 multipart/form-data 请求以及 boundary值问题

requests处理 multipart/form-data 请求以及 boundary值问题 前言1. 请求需要携带本地资源2. 请求需要携带json3. 总结 前言 关于 Content-type: multipart/form-data可以看一下这篇文章, 分析特别详细 HTTP协议之multipart/form-data请求分析 put和post区别不大, 只是上传资…...

FBX文件结构解读【文本格式】

FBX 格式几乎受到所有 3D 引擎的支持&#xff0c;是 Autodesk 开发的 3D 模型的专有格式。它支持顶点、索引、法线、UV坐标、材质和动画。 FBX还支持许多其他类型的信息&#xff0c;但它们对游戏引擎几乎没有用处。 推荐&#xff1a;用 NSDT编辑器 快速搭建可编程3D场景 有两种…...

JS基础语法

JS是一门面向对象的编程语言&#xff0c;运行在客户端的脚本语言&#xff0c;可以基于Node.js进行服务器端编程 JS的作用: 表单动态校验网页特效服务端开发 浏览器执行JS&#xff1a; 浏览器分为两部分&#xff1a;渲染引擎和JS引擎 渲染引擎用来解析HTML和CSS&#xff0c;…...

【Zabbix监控一】zabbix的原理与安装

利用一个优秀的监控软件&#xff0c;我们可以: ●通过一个友好的界面进行浏览整个网站所有的服务器状态 ●可以在 Web 前端方便的查看监控数据 ●可以回溯寻找事故发生时系统的问题和报警情况 总结&#xff1a;zabbix主要功能 监控&#xff0c;cpu负载&#xff0c;内存使用&a…...

图的十字链表存储结构

1.其实就是邻接表和逆邻接表的结合&#xff0c;说明白点&#xff0c;就是用箭头表示出弧头&#xff0c;弧尾&#xff0c;以及他们之间的关系 2.顶点结构 3.弧结构 3.这样根据上面的结点十字链表结构就很好分析了...

精华回顾:Web3 前沿创新者在 DESTINATION MOON 共话未来

9 月 17 日&#xff0c;由 TinTinLand 主办的「DESTINATION MOON: Web3 Dev Summit Shanghai 2023」线下活动在上海黄浦如约而至。 本次 DESTINATION MOON 活动作为 2023 上海区块链国际周的 Side Event&#xff0c;设立了 4 场主题演讲与 3 个圆桌讨论&#xff0c;聚集了诸多…...

【RPC】gRPC 安装及使用

本文记录下 Mac 安装 gRPC 的过程。 参考&#xff1a;官网 1. gRPC 安装 gRPC 安装步骤如下&#xff1a; 克隆 grpc 代码 git clone --recurse-submodules -b v1.58.0 --depth 1 --shallow-submodules https://github.com/grpc/grpc注意&#xff1a;不要直接 git clone http…...

Pygame中Sprite类的使用3

在Pygame中Sprite类的使用2_棉猴的博客-CSDN博客中提到了通过派生自pygame.sprite.Sprite类的自定义类Zombie&#xff0c;可以实现一个僵尸的移动。可以通过pygame.sprite.Group类实现对多个Zombie类实例的管理&#xff0c;即可以实现多个僵尸的移动。 1 pygame.sprite.Group类…...

23年下考前须知-软考中级信息安全工程师

信息安全工程师主要涉及计算机信息安全方面&#xff0c;在计算机软硬件、网络、应用相关领域从事安全系统设计、安全产品开发、产品集成、信息系统安全检测与审计等方面工作&#xff0c;服务单位可以是国家机关、企事业单位及科研教学单位等。 一、考试报名时间 信安考试一年…...

关于表单快速开发低代码技术平台的内容介绍

运用什么样的表单快速开发软件平台可以实现高效率创收&#xff1f;随着科技的进步和飞速发展&#xff0c;专业的低代码技术平台已经走入了很多企业的办公职场中&#xff0c;它们灵活、轻量级、优质、高效、易维护等优势特点&#xff0c;可以高效助力广大企业提质增效&#xff0…...

比特币 ZK 赏金系列:第 1 部分——支付解密密钥

以前&#xff0c;我们使用零知识赏金 (ZKB) 来支付比特币上的数独解决方案。在本系列中&#xff0c;我们将使用 ZKB 来解决范围更广的更实际的问题。 在第 1 部分中&#xff0c;我们应用 ZKB 来支付解密密钥。假设 Alice 使用对称密钥 K 加密她的文件。为了安全起见&#xff0…...

【Python深度学习】深度学习中框架和模型的区别

深度学习是人工智能领域的一股强大力量&#xff0c;它的快速发展离不开深度学习框架和模型的进步。本文将介绍深度学习框架和模型的基本概念、它们之间的联系与区别&#xff0c;以及如何根据项目需求选择合适的框架和模型。 一、深度学习框架 深度学习框架是进行深度学习研究和…...

MyBatis面试题(二)

文章目录 前言一、MyBatis 与 Hibernate 有哪些不同&#xff1f;二、MyBatis 的好处是什么&#xff1f;三、简述 Mybatis 的 Xml 映射文件和 Mybatis 内部数据结构之间的映射关系&#xff1f;四、什么是 MyBatis 的接口绑定,有什么好处&#xff1f;五、接口绑定有几种实现方式,…...

Android之MediaMetricsService实现本质(四十二)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 人生格言: 人生从来没有捷径,只有行动才是治疗恐惧和懒惰的唯一良药. 更多原创,欢迎关注:Android…...

Flutter超好用的路由库-fluro

文章目录 fluro的介绍fluro简介安装和导入路由配置导航到路由参数传递 fluro的典型使用创建路由管理类代码解释例子小结 初始化路由导航到路由 总结 fluro的介绍 fluro简介 fluro是一个流行的Flutter插件&#xff0c;用于实现高级路由管理。它提供了灵活的路由配置和导航功能…...

约数个数(蓝桥杯)

约数个数 题目描述 本题为填空题&#xff0c;只需要算出结果后&#xff0c;在代码中使用输出语句将所填结果输出即可。 答案&#xff1a;96 1200000 有多少个约数&#xff08;只计算正约数&#xff09;。 约数&#xff0c;又称因数。整数a除以整数b(b≠0) 除得的商正好是整…...

越狱(快速幂C++)

题目 监狱有连续编号为 11 到 n 的 n 个房间&#xff0c;每个房间关押一个犯人。 有 m 种宗教&#xff0c;每个犯人可能信仰其中一种。 不存在没有信仰的犯人。 如果相邻房间的犯人信仰的宗教相同&#xff0c;就可能发生越狱。 求有多少种状态可能发生越狱。 输入格式 共…...

电脑入门:怎么进入路由器设置

怎么进入路由器设置 在浏览器地址栏上输入路由器的出厂默认IP地址(192.168.0.1)后按回车。在登录窗口中输入说明书上的密码,点击“Log in”按钮进入宽带路由器管理设置界面。 管理设置界面分为左右栏,左栏是主菜单,右边则是与之对应的设置内容。 请根据自己接…...

Vue3大屏项目实现数字跳动的效果

一、vue-count-to组件&#xff1a; 1、安装&#xff1a; npm install vue3-count-to --save 2、使用&#xff1a; <template><BaseCountTo:startVal"startVal":endVal"endVal":duration"duration":decimals"decimals":pr…...

如何高效提取网页SVG内容:3步实现可视化数据导出

如何高效提取网页SVG内容&#xff1a;3步实现可视化数据导出 【免费下载链接】svg-crowbar Extracts an SVG node and accompanying styles from an HTML document and allows you to download it all as an SVG file. 项目地址: https://gitcode.com/gh_mirrors/sv/svg-crow…...

GLM-OCR开发者实操手册:Gradio client调用+批量图片识别脚本示例

GLM-OCR开发者实操手册&#xff1a;Gradio client调用批量图片识别脚本示例 你是不是也遇到过这样的场景&#xff1a;手头有一堆发票、合同或者产品说明书图片&#xff0c;需要把里面的文字、表格甚至公式都提取出来&#xff1f;一张张手动录入或者用传统OCR工具&#xff0c;不…...

AI结对编程:借助快马平台智能生成qclaw官网的AI功能模块

最近在开发qclaw官网时&#xff0c;尝试用AI辅助完成了一个合同条款分析功能&#xff0c;整个过程比想象中顺畅很多。这个功能的核心是让用户输入合同文本后&#xff0c;自动评估风险等级并给出提示。下面分享下具体实现思路和与AI协作的实践经验。 功能设计要点 首先明确这个…...

大模型“预训练”是怎么回事

经常在想&#xff0c;大模型是怎么学会“理解和生成语言”的。仔细看&#xff0c;它的训练过程其实很有规律&#xff0c;简单讲可以拆解成几个步骤。数据准备 训练大模型之前&#xff0c;最重要的是数据。我看到的做法是从各种网络资源收集海量文本&#xff0c;比如网页、书籍、…...

4步攻克Python代码执行可视化:开发者调试效率提升指南

4步攻克Python代码执行可视化&#xff1a;开发者调试效率提升指南 【免费下载链接】viztracer VizTracer is a low-overhead logging/debugging/profiling tool that can trace and visualize your python code execution. 项目地址: https://gitcode.com/gh_mirrors/vi/vizt…...

构建大规模数据导入系统:技术选型与工程实践

在现代数据密集型应用中&#xff0c;将海量数据高效、可靠地导入目标存储系统是一项基础但极具挑战的任务。表面上看&#xff0c;“写入数据库”只是一个简单的操作&#xff1b;然而&#xff0c;当数据规模达到TB级、业务逻辑涉及合并去重、系统架构包含多个存储引擎时&#xf…...

OpenClaw自动化测试:百川2-13B量化模型多场景准确率评估

OpenClaw自动化测试&#xff1a;百川2-13B量化模型多场景准确率评估 1. 测试背景与目标 去年冬天&#xff0c;我在为团队寻找一个能处理本地自动化任务的AI助手时&#xff0c;偶然发现了OpenClaw这个开源框架。当时最让我头疼的是&#xff0c;市面上的大模型要么太贵&#xf…...

Python环境变量冲突避坑指南:解决Fatal Python error: init_sys_streams错误(conda+Pycharm版)

Python环境变量冲突避坑指南&#xff1a;解决Fatal Python error: init_sys_streams错误&#xff08;condaPycharm版&#xff09; 当你在PyCharm中运行一个conda虚拟环境下的Python项目时&#xff0c;突然弹出一条令人窒息的错误信息&#xff1a;Fatal Python error: init_sys_…...

从Debezium到Flink RowData:手把手解析Flink CDC 2.3如何优雅处理MySQL的UPDATE事件

从Debezium到Flink RowData&#xff1a;深入解析Flink CDC 2.3处理MySQL UPDATE事件的机制 在实时数据处理的领域中&#xff0c;变更数据捕获(CDC)技术已经成为构建数据管道的核心组件。当MySQL数据库中的一条记录被更新时&#xff0c;如何准确捕获这一变更并将其高效地传递到下…...

HunyuanVideo-Foley 社区贡献指南:如何提交Prompt案例与优化建议

HunyuanVideo-Foley 社区贡献指南&#xff1a;如何提交Prompt案例与优化建议 1. 为什么你的贡献很重要 开源项目的生命力来自社区的共同参与。HunyuanVideo-Foley作为一款专注于音效生成的AI模型&#xff0c;其效果提升离不开用户的实际使用反馈和创意贡献。你的每一次Prompt…...