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.mzph.cn/web/10353.shtml

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

相关文章

steam_api64.dll是什么东西?steam_api64.dll缺失的多个详细解决方法

在现代PC游戏领域&#xff0c;Steam无疑是最具影响力的游戏分发和社交平台之一。它不仅提供了一个庞大的游戏市场&#xff0c;还集成了好友系统、成就系统、云存储等多种功能&#xff0c;为数百万玩家提供了便捷的游戏体验。在这庞大的生态系统中&#xff0c;steam_api64.dll作…

Windows10环境搭建http服务器

我 的 个 人 主 页&#xff1a;&#x1f449;&#x1f449; 失心疯的个人主页 &#x1f448;&#x1f448; 入 门 教 程 推 荐 &#xff1a;&#x1f449;&#x1f449; Python零基础入门教程合集 &#x1f448;&#x1f448; 虚 拟 环 境 搭 建 &#xff1a;&#x1f449;&…

基于 Wireshark 分析 IP 协议

一、IP 协议 IP&#xff08;Internet Protocol&#xff09;协议是一种网络层协议&#xff0c;它用于在计算机网络中实现数据包的传输和路由。 IP协议的主要功能有&#xff1a; 1. 数据报格式&#xff1a;IP协议将待传输的数据分割成一个个数据包&#xff0c;每个数据包包含有…

[Markdown]是时候该学学使用markdown写文章了

&#x1f495;&#x1f495;&#x1f495;欢迎各位来到我的博客&#xff0c;今天我们的主题是markdown&#xff0c;你将在这里学习到最全的markdown知识&#x1f495;&#x1f495;&#x1f495; 你还在使用富文本编辑器写文档或文章吗&#xff1f; 你还在用word一点一点地进行…

C语言----斐波那契数列

各位看官们好&#xff0c;当我写了上一篇博客杨辉三角后&#xff0c;有一些看官叫我讲一下斐波那契数列。对于这个大家应该是有了解的。最简单的规律就是f(n)f(n-2)f(n-1)。就是当前是前两项之和&#xff0c;然后下标1和0都是1.从第三项开始计算的。那么我们知道规律&#xff0…

选购洗地机有哪些技巧?2024洗地机全面解析,618洗地机综合对比

洗地机作为人们生活中智能清洁工具的代表&#xff0c;它自带清/污水箱&#xff0c;不用手洗滚刷&#xff0c;既可以吸尘也可以自动识别并清洗地板上的干湿垃圾和顽固污渍&#xff0c;它以多功能一体化的设计改善了家务清洁的效率和体验。那么如何在众多洗地机品牌中&#xff0c…

C#实现简单音乐文件解析播放——Windows程序设计作业2

1. 作业内容 编写一个C#程序&#xff0c;要求实现常见音乐文件的播放功能&#xff0c;具体要求如下&#xff1a;     1). 播放MP3文件&#xff1a; 程序应能够读取MP3文件&#xff0c;并播放其中的音频。     2). 播放OGG文件&#xff1a; 应能够播放ogg文件。     …

阿里云Redis创建使用

说明&#xff1a;本文介绍如何使用阿里云Redis&#xff0c;包括开通、连接、使用&#xff1b; 开通 进入官网Redis产品页&#xff0c;点击免费试用&#xff08;白嫖&#xff09;&#xff1b; 选择中间这个&#xff0c;云数据库Redis版&#xff1b; 开通完成后&#xff0c;可在…

零代码平台助力中国石化江苏油田实现高效评价体系

概述&#xff1a; 中国石化集团江苏石油勘探局有限公司面临着评价体系依赖人工处理数据、计算繁琐且容易出错的挑战。为解决这一问题&#xff0c;他们决定借助零代码平台明道云开发江苏油田高质量发展经济指标评价系统。该系统旨在实现原始数据批量导入与在线管理、权重及评分…

FFmpeg常用API与示例(四)——过滤器实战

1.filter 在多媒体处理中&#xff0c;filter 的意思是被编码到输出文件之前用来修改输入文件内容的一个软件工具。如&#xff1a;视频翻转&#xff0c;旋转&#xff0c;缩放等。 语法&#xff1a;[input_link_label1]… filter_nameparameters [output_link_label1]… 1、视…

C++中调用python函数(VS2017+WIN10+Anaconda虚拟环境)

1.利用VS创建C空项目 step1 文件——新建——项目 step2 Visual C—— Windows桌面——Windows桌面向导 step3 选择空项目 step4 源文件——新建项——添加 step5 Visual C——C文件&#xff08;.cpp&#xff09; 2.配置环境 Step1. 更换成Release与X64 Step2. 打开项目属性&…

文本提取新技能:学会按行数批量提取,轻松应对各种需求

在数字化时代&#xff0c;文本处理成为我们日常生活和工作中不可或缺的一部分。无论是从网页、文档还是数据库中提取信息&#xff0c;文本提取技能都显得尤为重要。而按行数批量提取文本内容&#xff0c;更是文本处理中的一项高效且实用的技能。本文将介绍办公提效工具如何按行…

在Spring Boot应用安装SSL证书

目录 前提条件 步骤一&#xff1a;下载SSL证书 步骤二&#xff1a;在Spring Boot安装SSL证书 步骤三&#xff1a;验证SSL证书是否安装成功 前提条件 已通过数字证书管理服务控制台签发证书SSL证书绑定的域名已完成DNS解析&#xff0c;即您的域名与主机IP地址相互映射已在W…

ASP.NET学生信息管理系统

摘 要 本文介绍了在ASP.net环境下采用“自上而下地总体规划&#xff0c;自下而上地应用开发”的策略开发一个管理信息系统的过程。通过分析某一学校学生管理的不足&#xff0c;创建了一套行之有效的计算机管理学生的方案。文章介绍了学生管理信息系统的系统分析部分&#xff0c…

微信投票源码系统至尊版 吸粉变现功能二合一

源码简介 微信投票系统在营销和社交互动中发挥着多方面的作用&#xff0c;它能够提升用户的参与度和品牌曝光度&#xff0c;还是一种有效的数据收集、营销推广和民主决策工具。 分享一款微信投票源码系统至尊版&#xff0c;集吸粉变现功能二合一&#xff0c;全网独家支持礼物…

已经安装tensorflow,仍报错No module named ‘tensorflow‘

在安装某些python虚拟环境的教程文章中&#xff0c;经常看到有评论区说安装了但是调用显示无模块&#xff0c;例如pytorch和tensorflow等等。 其实跟之前我写过的一篇文章解决方法类似&#xff0c;就是python项目中需要应用哪个虚拟环境&#xff0c;这个项目的python解释器就选…

企业网络需求及适合的解决方案

近年来&#xff0c;企业网络通信需求可谓五花八门&#xff0c;变幻莫测。它不仅为企业的生产、办公、研发、销售提供全面赋能&#xff0c;同时也让企业业务规模变大成为了可能。 在当前的技术格局下&#xff0c;中大型企业常见的技术方案有很多&#xff0c;而同时也有各自不可替…

商务英语口语成人考级外语培训之BECkao考级口语篇

在口语考试中&#xff0c;不管实际内容你能说出多少&#xff0c;但准备一些套话&#xff0c;至少还能撑撑场子你们说是不是&#xff1f; 内容阐述 描述事实 1.Im going to describe/present/explain/give you some information about... 2.Id like to say a few words about...…

德国储能项目锂电池储能集装箱突发火灾:安全挑战再引关注

2024年4月27日&#xff0c;德国尼尔莫尔商业区的一起锂电池储能集装箱火灾事件引起了全球关注。这起事故不仅导致两名消防员在救援过程中受伤&#xff0c;更暴露了储能系统在安全领域亟待解决的重要问题。 根据德国消防队的出警记录&#xff0c;火灾发生在晚上9点前不久。消防人…

机器学习算法应用——神经网络回归任务、神经网络分类任务

神经网络回归任务&#xff08;4-3&#xff09; 神经网络回归任务&#xff0c;通常指的是使用神经网络模型进行回归分析。回归分析是一种统计学方法&#xff0c;用于研究一个或多个自变量&#xff08;预测变量&#xff09;与一个因变量&#xff08;响应变量&#xff09;之间的关…