未捕获的不变式违规：重新渲染次数过多。React限制了渲染次数以防止无限循环。

Question

我正在尝试添加一个 snackBar ，以便在用户登录或未登录时显示消息。SnackBar.jsx：

import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";
import CheckCircleIcon from "@material-ui/icons/CheckCircle";
import ErrorIcon from "@material-ui/icons/Error";
import CloseIcon from "@material-ui/icons/Close";
import green from "@material-ui/core/colors/green";
import IconButton from "@material-ui/core/IconButton";
import Snackbar from "@material-ui/core/Snackbar";
import SnackbarContent from "@material-ui/core/SnackbarContent";
import { withStyles } from "@material-ui/core/styles";

const variantIcon = {
  success: CheckCircleIcon,
  error: ErrorIcon
};

const styles1 = theme => ({
  success: {
    backgroundColor: green[600]
  },
  error: {
    backgroundColor: theme.palette.error.dark
  },
  icon: {
    fontSize: 20
  },
  iconVariant: {
    opacity: 0.9,
    marginRight: theme.spacing.unit
  },
  message: {
    display: "flex",
    alignItems: "center"
  }
});

function SnackbarContentWrapper(props) {
  const { classes, className, message, onClose, variant, ...other } = props;
  const Icon = variantIcon[variant];

  return (
    <SnackbarContent
      className={classNames(classes[variant], className)}
      aria-describedby="client-snackbar"
      message={(
        <span className={classes.message}>
          <Icon className={classNames(classes.icon, classes.iconVariant)} />
          {message}
        </span>
      )}
      action={[
        <IconButton
          key="close"
          aria-label="Close"
          color="inherit"
          className={classes.close}
          onClick={onClose}
        >
          <CloseIcon className={classes.icon} />
        </IconButton>
      ]}
      {...other}
    />
  );
}

SnackbarContentWrapper.propTypes = {
  classes: PropTypes.shape({
    success: PropTypes.string,
    error: PropTypes.string,
    icon: PropTypes.string,
    iconVariant: PropTypes.string,
    message: PropTypes.string,
  }).isRequired,
  className: PropTypes.string.isRequired,
  message: PropTypes.node.isRequired,
  onClose: PropTypes.func.isRequired,
  variant: PropTypes.oneOf(["success", "error"]).isRequired
};

const MySnackbarContentWrapper = withStyles(styles1)(SnackbarContentWrapper);

const CustomizedSnackbar = ({
  open,
  handleClose,
  variant,
  message
}) => {
  return (
    <div>
      <Snackbar
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left"
        }}
        open={open}
        autoHideDuration={6000}
        onClose={handleClose}
      >
        <MySnackbarContentWrapper
          onClose={handleClose}
          variant={variant}
          message={message}
        />
      </Snackbar>
    </div>
  );
};

CustomizedSnackbar.propTypes = {
  open: PropTypes.bool.isRequired,
  handleClose: PropTypes.func.isRequired,
  variant: PropTypes.string.isRequired,
  message: PropTypes.string.isRequired
};

export default CustomizedSnackbar;

SignInFormContainer.jsx:

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import SnackBar from '../../components/SnackBar';
import SignInForm from './SignInForm';

const SingInContainer = ({ message, variant}) => {
    const [open, setSnackBarState] = useState(false);
    const handleClose = (reason) => {
        if (reason === 'clickaway') {
          return;
        }
        setSnackBarState(false)

      };

    if (variant) {
        setSnackBarState(true);
    }
    return (
        <div>
        <SnackBar
            open={open}
            handleClose={handleClose}
            variant={variant}
            message={message}
            />
        <SignInForm/>
        </div>
    )
}

SingInContainer.propTypes = {
    variant: PropTypes.string.isRequired,
    message: PropTypes.string.isRequired
}

const mapStateToProps = (state) => {
    const {variant, message } = state.snackBar;

    return {
        variant,
        message
    }
}

export default connect(mapStateToProps)(SingInContainer);

当我运行应用程序时，我遇到了这个错误：

Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop.
at invariant (http://localhost:9000/bundle.js:34484:15)
at dispatchAction (http://localhost:9000/bundle.js:47879:44)
at SingInContainer (http://localhost:9000/bundle.js:79135:5)
at renderWithHooks (http://localhost:9000/bundle.js:47343:18)
at updateFunctionComponent (http://localhost:9000/bundle.js:49010:20)
at beginWork (http://localhost:9000/bundle.js:50020:16)
at performUnitOfWork (http://localhost:9000/bundle.js:53695:12)
at workLoop (http://localhost:9000/bundle.js:53735:24)
at HTMLUnknownElement.callCallback (http://localhost:9000/bundle.js:34578:14)
at Object.invokeGuardedCallbackDev (http://localhost:9000/bundle.js:34628:16)

问题是由于SnackBar组件引起的。我使用useState钩子来改变SnackBar的状态。我是否应该使用类和componentShouldUpdate，以便不渲染多次？

问题原因是SnackBar组件导致的。我使用useState钩子来更改SnackBar的状态。为了避免多次渲染，我是否应该使用类和componentShouldUpdate呢？

- Slim

---

你可能正在使用Webpack，如果是这样，我想提醒你关注devtool选项，它可以让你精确定位到原始代码中的错误，而不是像现在一样在捆绑代码中定位错误。 - Nino Filiu

请问您能否检查一下 handleClose 是否被多次调用了，如果将 handleClose={handleClose} 改为 handleClose={()=>handleClose} 是否可以解决这个问题？ - Nicholas

@Nicholas 我试过了，但是我得到了同样的错误。 - Slim

我也遇到了类似的问题，但在我的情况下，是由于来自先前渲染的过时值，我已经在useCallback中传递了空依赖数组并且不必要地更新状态。 - Wasit Shafi

我曾经遇到过类似的错误，但那是由于 API 调用失败并且 API 自动重试导致的。 - Yug Singh

@NinoFiliu 如果他们能提供一些关于在哪里进行这些所谓的改变的基本示例，那就太好了。听起来好像你需要一个关于Webpack的博士学位才能理解他们在说什么。有没有可能你能总结一下？ - undefined

Answer 1

我怀疑问题在于你在函数组件主体内立即调用了状态设置器，这迫使React再次调用具有相同props的函数，导致再次调用状态设置器，进而触发React再次调用你的函数......依此类推。

const SingInContainer = ({ message, variant}) => {
    const [open, setSnackBarState] = useState(false);
    const handleClose = (reason) => {
        if (reason === 'clickaway') {
          return;
        }
        setSnackBarState(false)

      };

    if (variant) {
        setSnackBarState(true); // HERE BE DRAGONS
    }
    return (
        <div>
        <SnackBar
            open={open}
            handleClose={handleClose}
            variant={variant}
            message={message}
            />
        <SignInForm/>
        </div>
    )
}

相反，我建议您只需使用三元运算符有条件地设置状态属性的默认值，这样最终您会得到：

const SingInContainer = ({ message, variant}) => {
    const [open, setSnackBarState] = useState(variant ? true : false); 
                                  // or useState(!!variant); 
                                  // or useState(Boolean(variant));
    const handleClose = (reason) => {
        if (reason === 'clickaway') {
          return;
        }
        setSnackBarState(false)

      };

    return (
        <div>
        <SnackBar
            open={open}
            handleClose={handleClose}
            variant={variant}
            message={message}
            />
        <SignInForm/>
        </div>
    )
}

全面演示

请参见此CodeSandbox.io 演示，其中包括其工作的全面演示以及您拥有的错误组件，您可以在两者之间切换。

- GregL

---

你的答案解决了问题，但变量 open 总是为 false。 - Slim

@para008 我添加了一个全面的演示，以证明它可以按照预期工作。 - GregL

我找不到我的错误，因为 open 对我来说始终为 false，然而 !!variant 在开始时也是 false，然后变成 true。 - Slim

也许我应该在另一个问题中询问。谢谢你的回答。 - Slim

@para008 请查看更新后的演示。现在应该完全可用，并模拟未设置 variant 的情况。 - GregL

你的回答解决了我的问题，谢谢！ - Patrick Martinus

Answer 2

在 SnackbarContentWrapper 中，您需要进行更改。

<IconButton
  key="close"
  aria-label="Close"
  color="inherit"
  className={classes.close}
  onClick={onClose} // change this
>

到

<IconButton
  key="close"
  aria-label="Close"
  color="inherit"
  className={classes.close}
  onClick={() => onClose()} // to this
>

这样它只在单击时触发操作。

或者，您可以在SignInContainer中将handleClose进行柯里化：

const handleClose = () => (reason) => {
  if (reason === 'clickaway') {
    return;
  }
  setSnackBarState(false)
};

一样的。

- Josh Pittman

---

谢谢，这对我有效。这正是我在寻找的 onClick={() => onClose}。 - jeetdeveloper

有人能告诉我在谷歌中搜索什么，以便了解 onClick={() => onClose} 和 onClick={onClose} 之间的区别吗？谢谢！ - picklepick

在谷歌上搜索“在React中绑定内联函数”应该能帮助你找到需要的答案。你需要学习JS中的'this'和柯里化函数，这是一个相当深奥的话题。 - Josh Pittman

请告诉我们更多关于柯里化技术的内容。 - Snowmanzzz

onClick={() => onClose} 和 onClick={onClose} 的区别是什么？

• onClick={() => onClose}：每次单击都会创建一个新的函数实例，可能会导致性能问题。
• onClick={onClose}：传递了一个对已定义的函数的引用，不会导致性能问题。

- Snowmanzzz

Answer 3

您必须在onClick中链接一个事件。此外，click函数必须接收该事件。请参见示例

export default function Component(props) {

    function clickEvent (event, variable){
        console.log(variable);
    }

    return (
        <div>
            <IconButton
                key="close"
                aria-label="Close"
                color="inherit"
                onClick={e => clickEvent(e, 10)}
            >
        </div>
    )
}

- Elyson Romeiro

Answer 4

当调用如下的 add event 函数时：

之前：

 <button onClick={ decrementCount() }>-</button>

之后

 <button onClick={ () => decrementCount() }>-</button>

- smit agravat

---

这对我有帮助，但为什么需要这样做？我只是想澄清一下我的概念，因为我是JS的新手。 - codeomascot

Answer 5

在调用handleFunction之前，您需要添加一个事件，例如：

function SingInContainer() {
..
..
handleClose = () => {
}

return (
    <SnackBar
        open={open}
        handleClose={() => handleClose}
        variant={variant}
        message={message}
        />
    <SignInForm/>
  )
}

- Cristian marín

Answer 6

只需记住，如果你将带括号的函数传递给组件，那么每次组件渲染时该函数都会执行。为了防止这种情况发生，请尝试在函数前加上()=>。

- goodhyun

Answer 7

根据我收集到的信息，似乎当我们调用太多函数时会导致错误。

主要是 setState() 函数。

解决这个问题的方法之一是在函数内设置状态，而不是直接通过例如 onClick 调用 setState。

像这样使用很多状态可能会导致 React 多次重新渲染，从而导致此错误。

- kushagra-aa

Answer 8

如果你的这段简单代码抛出了"Too many re-renders"的错误提示。

import { useState } from 'react';

function App() {
    const [name, setName] = useState("");
    
    setName("Kushal"); // Throws React Error: Too many re-renders

    return (
      <div>{name}</div>
    );
}

export default App;

然后像下面这样使用useEffect

import { useState, useEffect } from 'react';

function App() {
    const [name, setName] = useState("");

    useEffect(()=>{
        setName("Kushal");
    }, []); // empty array means only once
    
    return (
      <div>{name}</div>
    );
}

export default App;

- KushalSeth

Answer 9

你可以通过在函数内部使用钩子来防止这个错误。

- Sagara Harasgama

Answer 10

我遇到了类似的问题，但我的情况有所不同。 useEffect(()=>{},[])让我免受此错误的困扰。

- Hayeul Tanjib