REACT TypeError:类扩展值未定义不是构造函数或空值

Question

我是 React 的新手，我正在尝试构建一个静态网页来练习。 当我尝试打开网页时，我收到此错误，指的是src文件夹中的App.js文件。

错误 1-图像

应用.js代码如下：

import React from 'react';
import Task from './task.js'
import Navbar from './js/Navbar';
import MainPage from './js/MainPage';
import './App.css';
const tasks = [];
tasks.push(new Task("finish lab07", 0, 1, "AWI", "2020-05-27", 0));
tasks.push(new Task("finish ", 1, 1, "AWI", "2020/05/30", 0));
tasks.push(new Task("start studyng", 0, 1, "FL", "2020/06/01", 0));
const projects = [{id: 0, projectName: "AWI"}, {id: 1, projectName: "FL"}];
class App extends React.Component() {
constructor(props){
super(props);
this.state = {tasks: tasks};
}
render(){
return (
<>
<Navbar id="navbar" />
<MainPage projects={projects} tasks={tasks}/>
</>
);
} 
}
export default App;

如果我尝试从"反应"导入 React，{组件} 我使用"扩展组件"而不是"扩展 React.Component"，我收到此错误：

错误 2-图像

感谢您的帮助！

Answer 1

这是你应该怎么做的：

class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}

您正在使用Component()类调用Component，这就是它导致错误的原因。

Answer 2

您正在扩展React.Component()而不是React.Component

请参阅下面的工作代码

import React from 'react';
import Task from './task.js'
import Navbar from './js/Navbar';
import MainPage from './js/MainPage';
import './App.css';
const tasks = [];
tasks.push(new Task("finish lab07", 0, 1, "AWI", "2020-05-27", 0));
tasks.push(new Task("finish ", 1, 1, "AWI", "2020/05/30", 0));
tasks.push(new Task("start studyng", 0, 1, "FL", "2020/06/01", 0));
const projects = [{id: 0, projectName: "AWI"}, {id: 1, projectName: "FL"}];
class App extends React.Component {
constructor(props){
super(props);
this.state = {tasks: tasks};
}
render(){
return (
<>
<Navbar id="navbar" />
<MainPage projects={projects} tasks={tasks}/>
</>
);
} 
}
export default App;

Answer 3

这是你需要做的Component而不是Component()

import React, {Component} from 'react'; // import Component
import Task from './task.js'
import Navbar from './js/Navbar';
import MainPage from './js/MainPage';
import './App.css';
const tasks = [];
tasks.push(new Task("finish lab07", 0, 1, "AWI", "2020-05-27", 0));
tasks.push(new Task("finish ", 1, 1, "AWI", "2020/05/30", 0));
tasks.push(new Task("start studyng", 0, 1, "FL", "2020/06/01", 0));
const projects = [{id: 0, projectName: "AWI"}, {id: 1, projectName: "FL"}];
// Extends Component (not Component())
class App extends Component {
constructor(props){
super(props);
this.state = {tasks: tasks};
}
render(){
return (
<>
<Navbar id="navbar" />
<MainPage projects={projects} tasks={tasks}/>
</>
);
} 
}
export default App;