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

【问题标题】：Problem Too many re-renders.Try to render components in connection with a button and state hooks问题太多重新渲染。尝试渲染与按钮和状态挂钩相关的组件
【发布时间】：2019-11-09 02:09:57
【问题描述】：

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

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

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

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

在您的情况下，您有 2 个操作数：() => setshowDetailed(true) 和 setshowAggregated(false)，所以基本上每次渲染组件时，都会调用第二个操作数（setshowAggregated(false)），重新渲染最终进入无限循环的组件。

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

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

第二个按钮也是如此。

【讨论】：