React类组件转函数组件报错：Uncaught TypeError: isOpen is not a function

错误根源 #

你在handleToggle函数里错误地将isOpen当作函数调用（isOpen()），但isOpen是useState返回的状态值（不是函数），因此触发了类型错误。同时代码里还有两个潜在问题：useState初始值设置不合理、useEffect导致无限循环。

修复步骤 #

• 修正状态更新逻辑
  要切换导航的展开/收起状态，需要给setIsOpen传入正确的新值，推荐用函数式更新（更可靠，避免状态依赖问题）：

  const handleToggle = () => {
    // 用函数式更新，基于旧状态取反
    setIsOpen(prevIsOpen => !prevIsOpen);
  };
  

  或者简单场景下直接取反当前状态：

  const handleToggle = () => {
    setIsOpen(!isOpen);
  };
  

• 设置正确的初始状态
  类组件里初始isOpen是false，函数组件里要保持一致，把初始值从null改成false：

  const [isOpen, setIsOpen] = useState(false);
  

• 修复useEffect的无限循环
  当前的useEffect没有依赖数组，会在每次组件渲染后执行handleToggle，导致无限触发状态更新。如果不需要组件挂载时自动切换导航状态，直接删掉这个useEffect；如果必须在挂载时执行，要加上空依赖数组：

  useEffect(() => {
    handleToggle();
  }, []); // 空数组确保只在组件挂载时执行一次
  

修复后的核心代码片段 #

export default function Navbar(){

  const [anchorEl, setAnchorEl] = useState(null);
  const open = Boolean(anchorEl);
  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };
   
  // 修正初始值为false
  const [isOpen, setIsOpen] = useState(false);
  
  // 删掉多余的useEffect（如果不需要挂载时自动执行）
  // useEffect(() =>{
  //  handleToggle();
  // });
  
  // 修正后的handleToggle
  const handleToggle = () => {
    setIsOpen(prevIsOpen => !prevIsOpen);
  };

  // 后续return部分保持不变...
}

内容的提问来源于stack exchange，提问作者Dhruv verma