为什么控制台日志这是未定义的反应?

Question

我最近回到了编码，我正在尝试学习react在udemy。这段代码应该从一个网站获取json文件，并将其console.log。相反，我得到一个这是未定义的错误。我如何让它正确地从获取的网站记录信息，并删除这是未定义的错误?

import {Component} from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component() {

constructor(){
super();
this.state ={
monsters:[],
};
}

componentDidMount(){
fetch('https://jsonplaceholder.typicode.com/users').then((response)=>response.json()).then((users)=>console.log(users));
}
render(){
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}}
export default App;

Answer 1

试试这个，我们现在可以使用函数组件和钩子，因为它很容易使用，对其他人来说也是可读的。

import React, { useEffect } from 'react';
const App = () => {
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/users')
.then((response)=>response.json())
.then((users)=>console.log(users));
}, []);
return (
<div className='App'>
<h1>Hello React.</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
export default App;