'useState' 未定义 no-undef React [英] 'useState' is not defined no-undef React

查看：23
本文介绍了'useState' 未定义 no-undef React的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

import React, { useEffect } from "react";导入./App.css"；从./gettyimages-83457444-612x612.jpg"导入查克；从axios"导入 axios；功能应用(){const [state, setState] = useState({玩笑: ""，});useEffect(() => {取数据()；}, []);const fetchData = async() =>{const result = await axios.get("https://api.chucknorris.io/jokes/random");控制台日志(结果.数据.值)；setState({ ...state, 笑话: result.data.value });};返回 (<div className="容器"><div className="row"><div className="col-6"><h1 className="title">Chuck API</h1><img src={Chuck} alt="ChuckNoris"/>

<div className="col-6 searchJokeCol"><div className="card"><div className="card-header"><span>搜索查克的短语</span>

<div className="card-body"><input type="text"></input>

<div><button className="btn btn-warning btn-lg">点击即可！</button>

<h2 className="subTitle">这是笑话</h2><h4>{state.joke}</h4>

);}导出默认应用程序；

这就是我的 package.json

依赖项":{"@testing-library/jest-dom": "^4.2.4","@testing-library/react": "^9.5.0","@testing-library/user-event": "^7.2.1","axios": "^0.20.0",反应":^ 16.13.1"，"react-dom": "^16.13.1",反应脚本":3.4.3"，反应测试渲染器":^ 17.0.0-rc.1"},脚本":{开始":反应脚本开始"，"build": "react-scripts build","test": "反应脚本测试","ej

我收到这个错误

<块引用>

第 7:29 行:'useState' 未定义为 no-undef

解决方案

需要导入useState":

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

I'm trying to use react hooks for a simple problem. I believe the solution is stupid but I don't see it. I Tried to see in my package.json but didn't found the solution. and I'm pretty sure that I'm declaring my state in a good way.

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;

And that's my 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

and I get this error

Line 7:29: 'useState' is not defined no-undef

解决方案

You need to import "useState":

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

这篇关于'useState' 未定义 no-undef React的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆