Question

我已经搜索了很多次，但找不到与我得到此错误的原因有关的答案：

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);

Answer 1

您正在尝试执行Component。将React.Component()更新为React.Component。

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

1 个答案: