我是新来的人，面对以下问题： 我有两个按钮，想要渲染两个不同的组件。按下一个按钮应通过状态挂钩将变量设置为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;