React TypeError: класс расширяет значение undefined не является конструктором или нулем - PullRequest
Новая
       35

React TypeError: класс расширяет значение undefined не является конструктором или нулем

0 голосов
/ 10 июля 2019

Я искал это много раз, и я не могу найти ответ, касающийся того, почему я получаю эту ошибку: 

TypeError: Class extends value undefined is not a constructor or null
Module../src/components/Signup.js
C:/Users/fcc-introduction-app/src/components/Signup.js:5
  2 | import { connect } from "react-redux";
  3 | import { registerUser } from "../actions/index";
  4 | 
> 5 | class Signup extends React.Component() {
  6 |     constructor(props) {
  7 |         super(props);
  8 |

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

Структура файла выглядит как this .

И три основных файла, которые я считаю значительнымиявляются следующие: 

//index.js
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import store from "./store";
import "./index.css";
import App from "./App";

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById("root")
);


//App.js
import React from 'react';
import './sass/main.scss';
import Header from './components/Header';
import Introductions from './components/Introductions';
import Signup from './components/Signup';

export default class App extends React.Component() {

  render() {
    return (
        <div className="App">
            <Header />
            <Introductions />
            <Signup />
        </div>
    );
  }
}



//Signup.js
import React from "react";
import { connect } from "react-redux";
import { registerUser } from "../actions/index";

class Signup extends React.Component() {
    constructor(props) {
        super(props);

        this.state = {
            email: "",
            password: "",
            firstname: "",
            lastname: ""
        }
    }

    handleRegister = e => {
        e.preventDefault();
        this.props.registerUser(this.state);
    }


    render() {
        return(
           <form onSubmit={this.handleRegister}>
               <fieldset>
                   <legend>Sign Up</legend>
                   <label for="email">Email</label>
                   <input id="email" type="email" onChange={e => this.setState({ email: e.target.value })} required></input>
                   <label for="password" type="text">Password</label>
                   <input id="password" type="text" onChange={e => this.setState({ password: e.target.value })} required></input>
                   <label id="firstname">Firstname</label>
                   <input id="firstname" type="text" onChange={e => this.setState({ firstname: e.target.value })}></input>
                   <label id="lastname">Lastname</label>
                   <input id="lastname" type="text" onChange={e => this.setState({ lastname: e.target.value })}></input>
               </fieldset>
           </form>
        )
    }
}

const mapDispatchToProps = dispatch => {
    return {
        registerUser: userInfo => {
            dispatch(registerUser(userInfo));
        }
    };
};

export default connect(
    null,
    mapDispatchToProps
)(Signup);

1 Ответ

3 голосов
/ 10 июля 2019

Вы пытаетесь выполнить Компонент. Обновите React.Component() до React.Component.

...