我目前正在嘗試將我的導航欄匯入到一個新專案中。我使用狀態鉤子創建了一個導航欄。
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.
有誰知道如何解決這一問題？
uj5u.com熱心網友回復：
該問題很可能與onclick您的NavbarToggler組件有關。
通常在 React 中，onclick事件處理程式通常接受 FUNCTION，而不是 FUNCTION CALL。因此，您應該更改為
<NavbarToggler onClick={() => setIsOpen(currentState => !currentState)} />
這個小改動創建了一個箭頭函式，它的作用與以前相同。但是，不同之處在于這只是一個函式定義，這意味著它還沒有被呼叫（并且只是存在）
uj5u.com熱心網友回復：
它在 NavbarToggler onClick Event 中缺少箭頭功能。我想會解決問題
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/439042.html