'useState' 没有在 REACT 中定义为 no-undef答案

【问题标题】：'useState' is not defined no-undef in REACT'useState' 没有在 REACT 中定义为 no-undef
【发布时间】：2021-08-17 14:11:14
【问题描述】：

我对 React 完全陌生。所以这是一个投资组合网站。当我尝试运行 useState 时，App.jsx 中出现错误，称为

src\App.jsx 第 10:35 行：'useState' 未定义 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>
    )
}

【问题讨论】：

你必须从 react 中导入 useState。把它放在你的 APP.jsx 中：import React, { useState } from 'react';

标签： reactjs use-state

【解决方案1】：

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

const [menuOpen, setMenuOpen] = useState(false)

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

import { useState } from 'react';

【讨论】：

@prinethfernando 没问题。有一个很好的编码 =)

【解决方案2】：

您还没有导入useState。

import {useState} from 'react';

一般来说，你也应该导入 React，

import React, {useState} from 'react';

但某些捆绑器配置使这变得不必要。

【讨论】：

【解决方案3】：

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

import {useState} from 'react';

【讨论】：