Javascript 重新渲染过多(&Q).REACT限制渲染次数以防止无限循环.使用REACT下拉菜单时

发布于01月18日

const [dropdownOpen, setDropdownOpen] = useState(false)

return (<>
    <div className='mx-2' onClick={() => setDropdownOpen(!dropdownOpen)}>
        {user?.name}
    </div>
    <NavDropdown id="basic-nav-dropdown">
        <NavDropdown.Item>
            Logout
        </NavDropdown.Item> 
        <NavDropdown.Item href="/profile">
            Profile
        </NavDropdown.Item>
        <NavDropdown.Divider />
        <NavDropdown.Item href="/cart">
            Shopping Cart
        </NavDropdown.Item>
        <NavDropdown.Item href="/order">
            Order
        </NavDropdown.Item>
    </NavDropdown>
</>)

我正在try 使用不同的方法，通过单击{user?.name}打开下拉菜单，但出现错误:

重新渲染的次数太多.Reaction会限制渲染次数，以防止无限循环.

我如何实现名称上的点击效果，并使下拉菜单相应地出现？

推荐答案

你必须在NavDropdown中加一个props show. showprops 用于基于dropdownOpen的状态有条件地渲染NavDropdown

  const [dropdownOpen, setDropdownOpen] = useState(false);


  return (
    <>
      <div className='mx-2' onClick={() => setDropdownOpen(!dropdownOpen)}>
        {user?.name}
      </div>

      <NavDropdown show={dropdownOpen} id="basic-nav-dropdown"> // set show={dropdownOpen}
        <NavDropdown.Item>
          Logout
        </NavDropdown.Item>
        <NavDropdown.Item href="/profile">
          Profile
        </NavDropdown.Item>
        <NavDropdown.Divider />
        <NavDropdown.Item href="/cart">
          Shopping Cart
        </NavDropdown.Item>
        <NavDropdown.Item href="/order">
          Order
        </NavDropdown.Item>
      </NavDropdown>
    </>
  );