Question

实际上我刚刚开始学习反应。我正在从网站上学习教程。但是当我在命令行中编译此代码时，它显示“已成功编译”，但是当我打开浏览器时，它显示

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

实际上，我不知道如何解决此问题。但是由于这个错误，我无法继续我的课程。

import React, {component} from 'react';
import CardList from './CardList';
import {robots} from './robots';
import SearchBox from './SearchBox';

class App extends component {
    constructor(){
        super()
        this.state = {
        robots: robots,
        searchfield: ''     
        }
    }
    onSearchChange(event) {
        console.log(event.target.value);
    }
    render () {
    return (
        <div className='tc'>
        <h1> RoboFriends </h1>
        <SearchBox searchChange={this.onSearchChange}/>
        <CardList robots ={this.state.robots}/>
        </div>
        );
    }
 }  

export default App;

Answer 1

React对组件（类）使用PascalCase命名，

import React, {component} from 'react';

这里component应该是Component

import React, {Component} from 'react';

class App extends Component {

或者您有另一种方式，

import React from 'react';

class App extends React.Component {

Answer 2

将“组件”一词大写

import React, {Component} from 'react';

class App extends Component

Answer 3

0

当您导入React时，请尝试使用React.Component并不要使用React.Component **（）**删除这些括号。那么这个错误就消失了。

从'react'导入React； ......类App扩展了React.Component {}

或者您可以尝试这个。

从'react'导入React，{Component}； ......类App扩展了组件{

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

3 个答案: