使用setState时获取React.createElement：类型无效

Question

Expected

After clicking the login button without entering in email or password, user should see the Notification component

Results

After clicking login, setState is called setting this.state.errors to true, and the above error message is displayed.

handleSubmit function

Below if I remove the this.setState lines, nothing will happen, but I won't get any Chrome errors. However I need that setState so I can then use it to display the Notification (see code below this block)

handleLoginSubmit = this.handleLoginSubmit.bind(this);
handleLoginSubmit(e, user) {
  e.preventDefault();
  if (R.isNil(user.email)) return;

  // Log user in via Firebase
  firebase.auth().signInWithEmailAndPassword(user.email, user.password)
    .catch((err) => {
      if (err.code === 'auth/user-not-found') {
        console.log('need to create user')
        return this.createUser(user.email, user.password);
      } else {
        console.log('Incorrect email or password, please try again')

        this.setState({
          errors: true,
          errorMsg: 'Incorrect email or password, please try again'
        }, function () {
          console.log('>>> this.state', this.state);
        });
      }

      console.log('Completed')
    })
}

I also don't see the console.log after setting the state:

---

render() {
  return (
    <main>
      { this.state.errors ? <Notification/> : null }
      <Login handleLoginSubmit={ this.handleLoginSubmit }
             email={ this.state.email }
             password={ this.state.password } />
    </main>
  )
}

Full Code

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import * as R from 'ramda'
import * as firebase from 'firebase'

import { Login } from '../../components'
import { Notification } from '../../components'

export class LoginX extends Component {
    constructor(props) {
        super(props);
        this.state = {
            email: '',
            password: '',
            errors: false,
            errorMsg: ''
        }
        this.handleLoginSubmit = this.handleLoginSubmit.bind(this);
    }

    componentDidMount() {
    firebase.auth().onAuthStateChanged((user) => {
      this.checkAuth();
    })
  }

    componentDidUpdate(prevProps, prevState) {
      console.log('componentDidUpdate this.state', this.state)
    }

    checkAuth() {
    const user = firebase.auth().currentUser;

    if (!user) {
      return
    }
    else {
      if (!user.emailVerified) {
        // User has signed up, redirect them to verification
        this.props.history.push('/verification');
        return
      }
    }

    // User does not need to be authenticated.
    this.props.history.push('/dashboard');
  }

    handleLoginSubmit(e, user) {
        e.preventDefault();
        if (R.isNil(user.email)) return;

        // Log user in via Firebase
        firebase.auth().signInWithEmailAndPassword(user.email, user.password)
      .catch((err) => {
        if (err.code === 'auth/user-not-found') {
          console.log('need to create user')
          return this.createUser(user.email, user.password);
        }
        else {
          console.log('Incorrect email or password, please try again')

          this.setState({
            errors: true,
            errorMsg: 'Incorrect email or password, please try again'
          }, function() {
            console.log('>>> this.state', this.state);
          });
        }

        console.log('Completed')
      })
    }

    createUser(user, pass) {
    firebase.auth().createUserWithEmailAndPassword(user, pass)
      .then((user) => {
        console.log('verification email sent')
        // user.sendEmailVerification()
      })
      .catch((err) => {
        console.log(err)
        // this.setState({inProgress: false})
        switch (err.code) {
          case "auth/email-already-in-use": {
                        console.log('Account already exists, please log in')
            // this.setState({errorMsg: "Account already exists, please log in"});
            break;
          }
          case "auth/invalid-email": {
                        console.log('Invalid email address format (domain is automatically included)')
            // this.setState({errorMsg: "Invalid email address format (domain is automatically included)"});
            break;
          }
          case "auth/operation-not-allowed": {
                        console.log('Login system in unavailable, please contact the system administrator')
            // this.setState({errorMsg: "Login system in unavailable, please contact the system administrator"});
            break;
          }
        }
      })
  }

    render() {
        return (
            <main>
                { this.state.errors ? <Notification/> : null }
                <Login handleLoginSubmit={ this.handleLoginSubmit }
                       email={ this.state.email }
                       password={ this.state.password } />
            </main>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        state
    }
}


const LoginContainer = LoginX;
export default connect(mapStateToProps)(withRouter(LoginContainer))

It's something wrong with Notifications

import React from 'react'
import PropTypes from 'prop-types'

const Notifications = (props) => {

  return (
    <div className="notification">
      Notifications
    </div>
  );
}

export default Notifications

Notifications.propTypes = {

};

Answer 1

我认为这是一个错字，请使用Notifications而不是Notification 。

import { Notifications } from '../../components';