标题重写为:类型错误:isOpen不是一个可调用的函数
P粉642920522
P粉642920522 2023-09-01 16:14:48
[React讨论组]
<p>我试图将我的基于类的组件转换为基于函数的组件,这是我在学习REACT时写的一些时间,但在转换过程中,我遇到了一个错误,即isOpen不是一个函数,我有点不明白,因为我将其定义为一个状态并在handleToggle()中调用,然后在组件的logo处调用它。</p> <pre class="brush:php;toolbar:false;">import React, { useState, useEffect } from &quot;react&quot;; import logo from &quot;../images/logo.svg&quot;; import { FaAlignRight } from &quot;react-icons/fa&quot;; import { Link } from &quot;react-router-dom&quot;; import Badge from '@mui/material/Badge'; import Menu from '@mui/material/Menu'; import MenuItem from '@mui/material/MenuItem'; export default function Navbar(){ const [anchorEl, setAnchorEl] = useState(null); const open = Boolean(anchorEl); const handleClick = (event) =&gt; { setAnchorEl(event.currentTarget); }; const handleClose = () =&gt; { setAnchorEl(null); }; const [isOpen, setIsOpen] = useState(null); useEffect(() =&gt;{ handleToggle(); }); // state = { // isOpen: false, // }; const handleToggle = () =&gt; { setIsOpen(isOpen() ); }; return ( &lt;nav className=&quot;navbar&quot;&gt; &lt;div className=&quot;nav-center&quot;&gt; &lt;div className=&quot;nav-header&quot;&gt; &lt;Link to=&quot;/&quot;&gt; &lt;img src={logo} alt=&quot;Beach Resort&quot; /&gt; &lt;/Link&gt; &lt;button type=&quot;button&quot; className=&quot;nav-btn&quot; onClick={handleToggle} &gt; &lt;FaAlignRight className=&quot;nav-icon&quot; /&gt; &lt;/button&gt; &lt;/div&gt; &lt;ul className={isOpen ? &quot;nav-links show-nav&quot; : &quot;nav-links&quot;} &gt; &lt;li&gt; &lt;Link to=&quot;/&quot;&gt;Home&lt;/Link&gt; &lt;/li&gt; &lt;li&gt; &lt;Link to=&quot;/rooms&quot;&gt;Rooms&lt;/Link&gt; &lt;/li&gt; &lt;/ul&gt; &lt;Badge badgeContent={4} color=&quot;primary&quot; id=&quot;basic-button&quot; aria-controls={open ? 'basic-menu' : undefined} aria-haspopup=&quot;true&quot; aria-expanded={open ? 'true' : undefined} onClick={handleClick} &gt; &lt;i className=&quot;fa-solid fa-cart-shopping text-light&quot; style={{ fontSize: 25, cursor: &quot;pointer&quot; }} &gt;&lt;/i&gt; &lt;/Badge&gt; &lt;/div&gt; &lt;Menu id=&quot;basic-menu&quot; anchorEl={anchorEl} open={open} onClose={handleClose} MenuListProps={{ 'aria-labelledby': 'basic-button', }} &gt; &lt;MenuItem onClick={handleClose}&gt;Profile&lt;/MenuItem&gt; &lt;MenuItem onClick={handleClose}&gt;My account&lt;/MenuItem&gt; &lt;MenuItem onClick={handleClose}&gt;Logout&lt;/MenuItem&gt; &lt;/Menu&gt; &lt;/nav&gt; ); }</pre> <p>将非常感谢任何建议。</p>
P粉642920522
P粉642920522

全部回复(1)
P粉951914381

useState 返回一个包含两个元素的数组:一个存储在状态中的值和一个用于更新它的函数。如果你调用 const [isOpen, setIsOpen] = useState(null)isOpen 是你的值(最初设置为 null),setIsOpen 是一个用于更新它的函数。

当你写 const handleToggle = () => { setIsOpen(isOpen() ) } 时,你试图调用一个 null 值,这是不可能的,因为它不是一个函数。这就是错误信息告诉你的。

如果你想要切换 isOpen 的值,你应该将 isOpen 声明为一个布尔值,并使用 isOpen 的相反值来调用 setIsOpen

const [isOpen, setIsOpen] = useState(false);  // <= 将其最初设置为 false

const handleToggle = () => {
  setIsOpen(!isOpen); // <= 当它为 false 时,将 isOpen 设置为 true,当它为 true 时,将 isOpen 设置为 false
};

然而,如果你在没有依赖数组的 useEffect 中调用 handleToggle,就像你正在做的那样,它将在每次重新渲染时被调用,这可能不是你想要的。你很可能希望在响应用户交互时调用它 - 例如在响应 HTML 元素事件(如 onClick)时。否则,你应该重构你的代码,添加必要的依赖项到 useEffect 中。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号