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,一经查实,立即删除!

相关文章

掌握SQL的时间序列分析利器:LEAD与LAG函数详解

在SQL中&#xff0c;处理时间序列数据时&#xff0c;经常需要查看当前行与相邻行之间的关系。这时&#xff0c;LEAD和LAG两个窗口函数就显得尤为重要。它们允许我们访问结果集中的前一行或后一行的数据&#xff0c;为数据分析和处理提供了极大的便利。本文将详细介绍LEAD和LAG函…

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一点一点地进行…

算法训练营day29

一、组合 参考链接77. 组合 - 力扣&#xff08;LeetCode&#xff09; import java.util.ArrayDeque; import java.util.ArrayList; import java.util.Deque; import java.util.List;public class Solution {public List<List<Integer>> combine (int n, int k) …

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;可在…

如何在Java项目中使用Spring Boot快速连接达梦数据库(DM)

前言 在Java开发领域&#xff0c;Spring Boot凭借其简洁快速的特性成为现代应用开发的首选框架。本文将详细介绍如何在Spring Boot项目中整合JDBC以快速连接达梦数据库(DM)&#xff0c;并提供一个简单的示例来验证连接是否成功。 一、环境准备与依赖配置 在开始之前&#xf…

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

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

QT设计模式:建造者模式

基本概念 建造者模式是一种创建型设计模式&#xff0c;它允许你创建复杂对象的过程独立于该对象的组成部分以及它们的组装方式。这样可以构造出不同的对象表示。 在建造者模式中&#xff0c;将创建对象的过程和对象的表示分离&#xff0c;通过一步步的构建&#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解释器就选…