antd组件状态变换为啥要使用剪头函数

先看下代码

import React, {useState} from 'react';
import {Switch, Typography} from 'antd';const {Paragraph, Text} = Typography;const App: React.FC = () => {
const [ellipsis, setEllipsis] = useState(true);return (<>//正确的<Switch checked={ellipsis}onChange={() => {setEllipsis(!ellipsis);}}/>//错误的<Switch checked={ellipsis}onChange={setEllipsis(!ellipsis)}/><Paragraph ellipsis={ellipsis}>Ant Design, a design language for background applications, is refined by Ant UED Team. AntDesign, a design language for background applications, is refined by Ant UED Team. AntDesign, a design language for background applications, is refined by Ant UED Team. AntDesign, a design language for background applications, is refined by Ant UED Team. AntDesign, a design language for background applications, is refined by Ant UED Team. AntDesign, a design language for background applications, is refined by Ant UED Team.</Paragraph><Paragraph ellipsis={ellipsis ? {rows: 2,expandable: true,symbol: 'more'} : false}>Ant Design, a design language for background applications, is refined by Ant UED Team. AntDesign, a design language for background applications, is refined by Ant UED Team. AntDesign, a design language for background applications, is refined by Ant UED Team. AntDesign, a design language for background applications, is refined by Ant UED Team. AntDesign, a design language for background applications, is refined by Ant UED Team. AntDesign, a design language for background applications, is refined by Ant UED Team.</Paragraph><Text style={ellipsis ? {width: 200} : undefined}ellipsis={ellipsis ? {tooltip: 'I am ellipsis now!'} : false}>Ant Design, a design language for background applications, is refined by Ant UED Team.</Text><Text codestyle={ellipsis ? {width: 200} : undefined}ellipsis={ellipsis ? {tooltip: 'I am ellipsis now!'} : false}>Ant Design, a design language for background applications, is refined by Ant UED Team.</Text></>
);
};export default App;

看下报错:

简单的解释:会在页面渲染的时候执行setState导致触发了reRender然后陷入死循环了。

这个例题也是可以看下比较有意思

React报错之Too many re-renders-腾讯云开发者社区-腾讯云

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何盘点选择的连锁收银系统贵不贵

在选择连锁收银系统时&#xff0c;成本是一个至关重要的考量因素。盘点连锁收银系统的成本既涉及到系统本身的购买费用&#xff0c;也包括了系统的维护、培训以及可能带来的附加费用。下面将从四个方面对连锁收银系统的成本进行盘点。 1. 初始投资成本 连锁收银系统的初始投资…

怎样的跨网软件,可以实现网间数据的安全收发?

网络隔离已是较为常见的网络安全保护措施&#xff0c;比如防火墙、网闸、VLAN&#xff0c;云桌面虚拟环境等方面进行隔离。像一些科技研发型企业&#xff0c;不仅仅是内外网隔离&#xff0c;甚至还划分办公网、研发网、测试网、生产网等&#xff0c;防止研发资料、设计资料等敏…

构建智能化招采与设备管理系统:架构设计与实践

随着科技的迅速发展&#xff0c;智能化招采与设备管理系统在各个领域的需求与应用日益增加。本文将深入探讨该系统的架构设计&#xff0c;介绍其关键特点和最佳实践&#xff0c;助力企业提升采购效率、管理流程&#xff0c;实现智能化招标采购与设备管理。 1. **需求分析与功能…

typescript 模块化

模块的概念&#xff1a; 把一些公共的功能单独抽离成一个文件作为一个模块。 模块里面的变量、函数、类等默认是私有的&#xff0c;如果我们要在外部访问模块里面的数据&#xff08;变量、函数、类&#xff09;&#xff0c;需要通过export暴露模块里面的数据&#xff08;&#…

Dual Aggregation Transformer for Image Super-Resolution论文总结

题目&#xff1a;Dual Aggregation Transformer&#xff08;双聚合Transformer&#xff09; for Image Super-Resolution&#xff08;图像超分辨&#xff09; 论文&#xff08;ICCV&#xff09;&#xff1a;Chen_Dual_Aggregation_Transformer_for_Image_Super-Resolution_ICCV…

【4】STM32·FreeRTOS·中断管理

目录 一、什么是中断 二、中断优先级分组设置 2.1、中断优先级基本概念 2.2、中断优先级分组 2.3、FreeRTOS中断特点 三、中断相关寄存器 3.1、系统中断优先级配置寄存器 3.2、PendSV和Systick中断优先级的配置 3.3、中断屏蔽寄存器 四、FreeRTOS中断管理实验 一、什…

【初始类和对象】(实例讲解!超级详细!)

【初始类和对象】 前言1. 面向对象的初步认知1.1什么是面向对象1.2 面向对象与面向过程 2. 类的定义和使用2.1 简单认识类2.2 类的定义格式 3. 知识的代码举例讲解3.1 创建类、实例化类3.2 构造方法初始化类、this 3. 总结 前言 由于类和对象是我们在学习过程中需要接受的概念…

本地运行.net项目

有时候需要我们自己做一个.net的课设项目&#xff0c;但是我们有了代码后却不知道怎么运行。我们0基础来学习一下如何运行一个.net项目 1.安装visual studio 2022 不用安装老版本&#xff0c;新版就可以。安装好了2022版本&#xff0c;这是一个支持web的IDE&#xff0c;我们可…

vue3父子组件相互调用方法详解

&#x1f49f; 上一篇文章 Vue2中父子组件互相传值和方法调用 &#x1f4dd; 系列专栏 vue从基础到起飞 目录 1、前言 2、子组件调用父组件方法&#xff08;setup组合式&#xff09; 2.1 父组件Father.vue 2.2 子组件Child.vue 3、父组件调用子组件方法&#xff08;setup组…

机器学习面试篇

如何理解机器学习数据集的概念 数据集是机器学习的基础&#xff0c;它包括了用于训练和测试模型所需的数据。数据集通常以矩阵的形式存在&#xff0c;其中每一行代表一个样本&#xff08;或实例&#xff09;&#xff0c;每一列代表一个特征&#xff08;或属性&#xff09;。…

教你一招,一键解锁云盘与NAS自动同步!

想象一下 数字生活就像一座繁忙的都市 云盘是你的空中阁楼 俯瞰着整个城市的美景 而NAS是坚实的地基 承载着所有珍贵的记忆 那如何让数据在 城市的高空与地面之间自由穿梭呢&#xff1f; 别急&#xff01;铁威马来帮你&#xff01; TOS 6创新功能&#xff1a;云盘挂载 …

python实现星号打印出金字塔

#编程实现下列图形的打印 a input() for i in range(int(a)//21): num * * ((i1)*2-1) print(num.center(int(a), )) 编译后通过。输入20后得到下面的星号金字塔