не может расширить компонент класса в реакции, все остальное работает нормально

Question

Невозможно расширить компонент класса, все остальное, например, функции стрелок, работают очень хорошо.

Я создаю простое приложение, в котором есть несколько компонентов. Я создал некоторые компоненты как функции, и это работает хорошо, но когда я пытаюсь создать компонент, расширяя класс, это терпит неудачу. Я перепробовал много вещей, но ни одна из них не работает для меня. Я новичок в React.

Это код, который я пытаюсь запустить:

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: ''
    }
}
    render(){
    return(
    <div className='tc'>
      <h1>RoboFriends</h1>
      <SearchBox />
      <CardList robots={this.state.robots} />
    </div>
    );
}
}

export default App;

В браузере появляется ошибка:

TypeError: Class extends value undefined is not a constructor or null
Module../src/App.js
C:/Users/Aku/Desktop/robofriends/src/App.js:6
  3 | import { robots } from './robots';
  4 | import SearchBox from './SearchBox';
  5 | 
> 6 | class App extends component {
  7 |   constructor() {
  8 |       super();
  9 |       this.state = {
View compiled


__webpack_require__
C:/Users/Aku/Desktop/robofriends/webpack/bootstrap:784
  781 | };
  782 | 
  783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  785 | 
  786 | // Flag the module as loaded
  787 | module.l = true;
View compiled


fn
C:/Users/Aku/Desktop/robofriends/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled


Module../src/index.js
http://localhost:3000/static/js/main.chunk.js:377:62
__webpack_require__
C:/Users/Aku/Desktop/robofriends/webpack/bootstrap:784
  781 | };
  782 | 
  783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  785 | 
  786 | // Flag the module as loaded
  787 | module.l = true;
View compiled


fn
C:/Users/Aku/Desktop/robofriends/webpack/bootstrap:150
  147 |         );
  148 |         hotCurrentParents = [];
  149 |     }
> 150 |     return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 |     return {
View compiled


1
http://localhost:3000/static/js/main.chunk.js:586:18
__webpack_require__
C:/Users/Aku/Desktop/robofriends/webpack/bootstrap:784
  781 | };
  782 | 
  783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  785 | 
  786 | // Flag the module as loaded
  787 | module.l = true;
View compiled


checkDeferredModules
C:/Users/Aku/Desktop/robofriends/webpack/bootstrap:45
  42 |  }
  43 |  if(fulfilled) {
  44 |      deferredModules.splice(i--, 1);
> 45 |      result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
     | ^  46 |  }
  47 | }
  48 | 
View compiled


Array.webpackJsonpCallback [as push]
C:/Users/Aku/Desktop/robofriends/webpack/bootstrap:32
  29 |  deferredModules.push.apply(deferredModules, executeModules || []);
  30 | 
  31 |  // run deferred modules when all chunks ready
> 32 |  return checkDeferredModules();
     | ^  33 | };
  34 | function checkDeferredModules() {
  35 |  var result;
View compiled


(anonymous function)
http://localhost:3000/static/js/main.chunk.js:1:75
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.  Click the 'X' or hit ESC to                           
dismiss this message.

ПРИМЕЧАНИЕ: ЭТО ПОКАЗЫВАЕТ СБОРКУ УСПЕШНО В ТЕРМИНАЛЕ
Я новичок в React, это будет для меня большой помощью. Спасибо

Answer 1

У вас есть опечатка, когда вы пытаетесь импортировать {component} из реакции. Он должен начинаться с заглавной буквы

import React,{ Component } from 'react';

. Импорт по умолчанию можно называть любым именем, но при импорте в {} необходимо использовать точно такое же имя, и он называется именованным импортом

.

Answer 2

импорт класса вашего компонента неверен. Вам нужно импортировать Component вместо component

import React,{ Component } from 'react';

class App extends Component {
  ...
}