標題重寫為：類型錯誤：isOpen不是可呼叫的函數

Question

<p>我試圖將我的基於類別的元件轉換為基於函數的元件，這是我在學習REACT時寫的一些時間，但在轉換過程中，我遇到了一個錯誤，即isOpen不是一個函數，我有點不明白，因為我將其定義為一個狀態並在handleToggle()中調用，然後在元件的logo處調用它。 </p> <pre class="brush:php;toolbar:false;">import React, { useState, useEffect } from "react"; import logo from "../images/logo.svg"; import { FaAlignRight } from "react-icons/fa"; import { Link } from "react-router-dom"; 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) => { setAnchorEl(event.currentTarget); }; const handleClose = () => { setAnchorEl(null); }; const [isOpen, setIsOpen] = useState(null); useEffect(() =>{ handleToggle(); }); // state = { // isOpen: false, // }; const handleToggle = () => { setIsOpen(isOpen() ); }; return ( <nav className="navbar"> <div className="nav-center"> <div className="nav-header"> <Link to="/"> <img src={logo} alt="Beach Resort" /> </Link> <button type="button" className="nav-btn" onClick={handleToggle} > <FaAlignRight className="nav-icon" /> </button> </div>

類別名={isOpen ? “導航連結顯示導航” : “導航連結”} > <li> <連結到=“/”>主頁 </li> <li> <連結到=“/房間”>房間 </li> </ul> <徽章徽章內容={4}顏色=“主要” id="基本按鈕" aria-controls={開啟？ '基本選單'：未定義} aria-haspopup=“真” aria-expanded={打開？ “真”：未定義} onClick={handleClick} > <i className=“fa-solid fa-cart-shopping text-light” style={{ fontSize: 25, 遊標: “指針”; }} ></i> </徽章>

Answer 1

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 中。