先看下代碼

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-騰訊云開發者社區-騰訊云