Eth*_*lle 18 javascript reactjs react-hooks
我正在尝试使用 react hooks 来解决一个简单的问题。我相信解决方案很愚蠢,但我没有看到。我试图在我的 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;Run Code Online (Sandbox Code Playgroud)
"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",
"ejRun Code Online (Sandbox Code Playgroud)
第 7:29 行:'useState' 未定义 no-undef
小智 50
您需要导入“useState”:
import React, { useEffect, useState } from "react";
Run Code Online (Sandbox Code Playgroud)
您忘记导入 useState
import React, { useEffect, useState } from "react";
Run Code Online (Sandbox Code Playgroud)
我看到您错过了 useState 导入。
要么你需要添加喜欢
import React, { useEffect, useState } from "react";
Run Code Online (Sandbox Code Playgroud)
或者让它React.useState即
const [state, setState] = React.useState({
joke: "",
});
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
41993 次 |
| 最近记录: |