React : Error: Too many re-renders. React limits the number of renders to prevent an infinite loop

Question

我目前正在尝试将我的导航栏导入到一个新项目中。我使用状态挂钩创建了一个导航栏。

export default function Heading() {
  const [isOpen, setIsOpen] = useState(false); 
  return (
    <div>
      <Navbar color="light" fixed="top" light expand="md">
        <NavbarBrand href="/">reactstrap</NavbarBrand>
        <NavbarToggler onclick={setIsOpen(!isOpen)} />
        <Collapse isOpen={isOpen} navbar>
          <Nav className="me-auto" navbar>
            <NavItem>
              <NavLink href="/components/">Components</NavLink>
            </NavItem>
            <NavItem>
              <NavLink href="https://github.com/reactstrap/reactstrap">
                GitHub
              </NavLink>
            </NavItem>
            <UncontrolledDropdown inNavbar nav>
              <DropdownToggle caret nav>
                Options
              </DropdownToggle>
              <DropdownMenu end>
                <DropdownItem>Option 1</DropdownItem>
                <DropdownItem>Option 2</DropdownItem>
                <DropdownItem divider />
                <DropdownItem>Reset</DropdownItem>
              </DropdownMenu>
            </UncontrolledDropdown>
          </Nav>
          <NavbarText>Simple Text</NavbarText>
        </Collapse>
      </Navbar>
    </div>
  );

}

我正在像这样在我的 App.tsx 中导入它

import Heading from "./modules/Heading";

export default function App() {
  return (
    <div className="App">
      <Heading/>
    </div>
  );
}

但是我收到这个错误

Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

有人知道如何解决这个问题吗？

Answer 1

您的 NavbarToggler 组件中的 onclick 很可能存在此问题。

通常在 React 中，onclick 事件处理程序通常接受 FUNCTION，而不是 FUNCTION CALL。因此，你应该改为

<NavbarToggler onClick={() => setIsOpen(currentState => !currentState)} />

这一小改动创建了一个箭头函数，其作用与以前相同。然而，区别在于这只是一个函数定义，意味着它还没有被调用（并且只是存在）

Answer 2

NavbarToggler onClick 事件中缺少箭头函数。我想会解决问题

React : Error: Too many re-renders. React limits the number of renders to prevent an infinite loop

React : Error: Too many re-renders. React limits the number of renders to prevent an infinite loop

typescript

reactjs

reactstrap