'useState' 未定义 no-undef React答案

【问题标题】：'useState' is not defined no-undef React'useState' 未定义 no-undef React
【发布时间】：2020-12-21 14:38:45
【问题描述】：

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

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

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

你需要导入“useState”：

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

【讨论】：

【解决方案2】：

我发现您错过了 useState 导入。

要么你需要加like

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

或将其设为React.useState 即

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

【讨论】：

【解决方案3】：

你忘记导入 useState

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

【讨论】：

【解决方案4】：

使用以下内容创建一个新文件“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);

并在您的代码中使用它：

import {useStateValue} from "./StateProvider"

【讨论】：