Question

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

下面的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

谢谢您的帮助！

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;

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

3 个答案: