'useState' 未在 REACT 中定义 no-undef

'useState' is not defined no-undef in REACT

我是 React 的新手。所以这是一个投资组合网站。当我尝试 运行 useState 时,在 App.jsx 中出现错误,称为

src\App.jsx Line 10:35: 'useState' is not defined no-undef

搜索关键字以了解有关每个错误的更多信息。

App.jsx

import Topbar from "./components/topbar/Topbar";
import Home from "./components/home/Home";
import AboutMe from "./components/about me/AboutMe";
import Resume from "./components/resume/Resume";
import Contact from "./components/contact me/Contact";
import "./app.scss";

function App() {
  const [menuOpen, setMenuOpen] = useState(false)
  return (
    <div className="app">
      <Topbar menuOpen={menuOpen} setMenuOpen={setMenuOpen}/>
      <div className="sections">
        <Home />
        <AboutMe />
        <Resume />
        <Contact />

      </div>
    </div>
  );
}

export default App;

Topbar.jsx

import "./topbar.scss"

export default function Topbar({setMenuOpen,menuOpen}) {
    return (
        <div className={"topbar " + (menuOpen && "active")}>
            <div className="wrapper">
                <div className="left">
                    <a href="#home" className="logo">Prineth.me</a>
                    <div className="itemContainer">
                    </div>
                </div>
                
                <div className="right">
                    <div className="nav">
                        <a href="#home" className="navTitles">Home</a>
                        <a href="#about" className="navTitles">About Me</a>
                        <a href="#resume" className="navTitles">Resume</a>
                        <a href="#contact" className="navTitles">Contact</a>
                    </div>

                    <div className="hamburger">
                        <span className="line1"></span>
                        <span className="line2"></span>
                        <span className="line3"></span>
                    </div>
                   
                </div>
            </div>
            
        </div>
    )
}

你的错误是由这一行产生的:

const [menuOpen, setMenuOpen] = useState(false)

你可以通过在 App.jsx 中导入 useState 钩子来解决这个问题:

import { useState } from 'react';

您还没有导入 useState

import {useState} from 'react';

一般来说,你还应该引入 React,

import React, {useState} from 'react';

但一些捆绑器配置不需要这样做。

您应该在文件中导入 useState App.jsx :

import {useState} from 'react';