'useState' 未定义 no-undef React

Question

我正在尝试使用反应钩子来解决一个简单的问题。 我相信解决方案是愚蠢的，但我没有看到。 我试图在我的 package.json 中查看，但没有找到解决方案。 而且我很确定我正在以一种好的方式声明我的 state。

 import React, { useEffect } from "react"; import "./App.css"; import Chuck from "./gettyimages-83457444-612x612.jpg"; import axios from "axios"; function App() { const [state, setState] = useState({ joke: "", }); useEffect(() => { fetchData(); }, []); const fetchData = async () => { const result = await axios.get("https://api.chucknorris.io/jokes/random"); console.log(result.data.value); setState({...state, joke: result.data.value }); }; return ( <div className="container"> <div className="row"> <div className="col-6"> <h1 className="title">Chuck API</h1> <img src={Chuck} alt="ChuckNoris" /> </div> <div className="col-6 searchJokeCol"> <div className="card"> <div className="card-header"> <span>Search for the Phrase of Chuck</span> </div> <div className="card-body"> <input type="text"></input> </div> </div> <div> <button className="btn btn-warning btn-lg">Just CLICK.</button> </div> </div> </div> <h2 className="subTitle"> Here is The joke</h2> <h4>{state;joke}</h4> </div> ); } export default App;

那是我的 package.json

 "dependencies": { "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", "axios": "^0.20.0", "react": "^16.13.1", "react-dom": "^16.13.1", "react-scripts": "3.4.3", "react-test-renderer": "^17.0.0-rc.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "ej

我得到这个错误

第 7:29 行：“useState”未定义 no-undef

Answer 1

您需要导入“useState”：

import React, { useEffect, useState } from "react";

Answer 2

我看到您错过了 useState 导入。

要么你需要添加喜欢

import React, { useEffect, useState } from "react";

或者让它React.useState即

const [state, setState] = React.useState({
    joke: "",
  });

Answer 3

你忘记导入 useState

import React, { useEffect, useState } from "react";

Answer 4

它需要导入才能在您的代码中为 React 中的钩子工作。

import {useState} from "react";

或者，如果您已经从“react”导入了 React 并且不想单独导入钩子，那么您可以通过以下方式使用它，

React.useState()

Answer 5

尝试导入：

从“./StateProvider”导入 {useStateValue}

创建一个名为“StateProvider.js”的新文件

插入此代码

 import react, { createContext, useContext, useReducer } from "react"; export const StateContext = createContext(); export const StateProvider = ({ reducer, initialState, children }) => ( <StateContext.Provider value={useReducer(reducer, initialState)}> {children} </StateContext.Provider> ); export const useStateValue = () => useContext(StateContext);

Answer 6

您需要导入“useState”：

import React, { useEffect, useState } from "react";

Answer 7

import React, {useState } from "react";