Reactjs 问题：重新渲染的次数太多。请尝试使用按钮和状态挂钩来渲染组件

我是一个新的反应和面对以下问题： 我有两个按钮，想渲染两个不同的组件。按下一个按钮应通过状态挂钩将变量设置为true，并应显示第一个组件，另一侧的另一个组件的变量应设置为false。使用此逻辑，我尝试渲染一个或另一个组件

通过此设置，我收到以下错误消息：

重新渲染的次数太多。React限制渲染的数量以防止无限循环。

我想解决办法很简单，但我不明白为什么会出现问题。 谢谢你的帮助

以下是相关代码的简化版本：

import { Button } from "semantic-ui-react";
import React, { useState } from "react";

const App = () => {
  const [showAggregated, setshowAggregated] = useState(true);
  const [showDetailed, setshowDetailed] = useState(false);
  return (
    <div>
      Test
      <Button.Group>
        <Button
          size="mini"
          onClick={(() => setshowAggregated(true), setshowDetailed(false))}
        >
          Aggregated Visualization{" "}
        </Button>
        <Button.Or />
        <Button
          size="mini"
          onClick={(() => setshowDetailed(true), setshowAggregated(false))}
        >
          Detailed Visualization
        </Button>
      </Button.Group>
      {/* Second Part of Page if Aggregated Component */}
      {showAggregated && <div>Aggregated</div>}
      {/* Second Part of Page if Detailed Component */}
      {showDetailed && <div>Detailed</div>}
    </div>
  );
};

export default App;

import{Button}来自“语义ui反应”；
从“React”导入React，{useState}；
常量应用=（）=>{
const[showcolgregated，setshowcolgregated]=useState（true）；
const[showDetailed，setshowDetailed]=使用状态（false）；
返回(
试验
setshowAggregated（true），setshowDetailed（false））}
>
聚合可视化{“}
setshowDetailed（true），setshowAggregated（false））}
>
详细可视化
{/*如果聚合组件，则为页面的第二部分*/}
{showAggregated&&Aggregated}
{/*页面的第二部分，如果详细组件*/}
{showDetailed&&Detailed}
);
};
导出默认应用程序；

您使用的是上文，它计算每个操作数

在本例中，您有两个操作数：

（）=>setshowDetailed（true）

和

setshowAggregated（false）
，因此基本上每次渲染组件时，都会调用第二个操作数（
setshowAggregated（false）
），重新渲染最终进入无限循环的组件

您真正想做的是（调用两个函数的事件处理程序）：

第二个按钮也是一样

onClick={(() => setshowDetailed(true), setshowAggregated(false))}

onClick={() => {
   setshowDetailed(true);
   setshowAggregated(false));
}}