REACT TypeError：类扩展值未定义不是构造函数或null答案

【问题标题】：REACT TypeError: Class extends value undefined is not a constructor or nullREACT TypeError：类扩展值未定义不是构造函数或null
【发布时间】：2020-09-15 21:21:14
【问题描述】：

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

Error1-Image

App.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} 我使用“扩展组件”而不是“扩展 React.Component”我收到此错误：

Error2-Image

感谢您的帮助！

【问题讨论】：

应该是class App extends React.Component 而不是class App extends React.Component()。删除()
React.component后面的括号()能去掉吗？

标签： javascript reactjs

【解决方案1】：

你应该这样做：

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

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

【讨论】：

【解决方案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;

【讨论】：

天哪。我什至不知道那些圆括号是怎么出现的。我使用“npx create-react-app”来初始化项目。而我没有注意到。这里没用的话题啊啊啊。非常感谢。

【解决方案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;

【讨论】：