Question

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

Answer 1

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

您正在使用上面的Comma Operator，它会评估每个操作数。

在您的情况下，您有2个操作数：() => setshowDetailed(true) 和 setshowAggregated(false)，因此基本上发生的是，每次渲染组件时，第二个操作数（{{1 }}）被调用，它将重新渲染最终陷入无限循环的组件。

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

setshowAggregated(false)

第二个按钮也是如此。

问题重新渲染太多。尝试渲染与按钮和状态挂钩相关的组件

1 个答案: