ReactJS登录页面未显示

Question

I am following this tutorial: reactjs-and-laravel---running-through-a-basic-setup---part-2-20p

but I can't get the contents of the login page to show. I have:

Login.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

export default class Login extends Component {

    constructor(props) {
        super(props);

        this.processSubmit = this.processSubmit.bind(this);
    }

    componentWillMount() {
        // do something like setting default state
    }

    processSubmit(values) {
        // do something with the values
    }

    render() {
        const { handleSubmit, submitting } = this.props;

        return (
            <div className="container mt-5">
                <div className="row justify-content-center">
                    <div className="col-6">
                        <div className="card">
                            <div className="card-body">
                                <h2 className="text-center font-weight-light mb-4">Sign into your account</h2>
                                <form onSubmit={handleSubmit(this.processSubmit)}>
                                    <Field
                                        label="Email Address"
                                        name="email"
                                        component={FormField}
                                        id="email"
                                        type="text"
                                        className="form-control"
                                    />
                                    <Field label="Password" name="password" component={FormField} id="password" type="password" className="form-control" />
                                    <div className="form-check">
                                        <label className="form-check-label">
                                            <Field name="remember" component="input" type="checkbox" className="form-check-input mt-2" value="1" />
                                            Remember me
                                        </label>
                                    </div>
                                    <div className="form-group mt-4">
                                        <button type="submit" className="btn btn-secondary" disabled={submitting}>Continue</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
};

Login = reduxForm({
    form: 'login',
    validate
})(Login);

Which is imported into App.js :

import React, {Component} from 'react'
import ReactDOM from 'react-dom'
import {BrowserRouter, Route, Switch} from 'react-router-dom'
import Home from '../containers/Home';
import Login from '../containers/LogIn';
import CreateUsers from '../containers/CreateUsers';
import Dashboard from '../containers/Dashboard';
import NavBar from './NavBar';

import {createStore, combineReducers} from 'redux';
import {reducer as formReducer} from 'redux-form';

import {Provider} from 'react-redux';

const rootReducer = combineReducers({
    form: formReducer,
});


const store = createStore(rootReducer);


class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            isAuthenticated: false
        };
    }

    userHasAuthenticated = authenticated => {
        this.setState({isAuthenticated: authenticated});
    };

    render() {
        return (
            <Provider store={store}>
                <BrowserRouter>
                    <div>
                        <NavBar />
                        <Route exact path="/" component={Home}/>
                        <Route path="/login" component={Login}/>
                        <Route path="/users/create" component={CreateUsers}/>
                        <Route path="/dashboard" component={Dashboard}/>
                    </div>
                </BrowserRouter>
            </Provider>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'))

What am I doing wrong?

---

Console is giving me:

Uncaught ReferenceError: reduxForm is not defined

---

It now gives me Uncaught ReferenceError: validate is not defined

---

Now I am getting:

Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`.
    in Route (created by App)
    in App

As well as:

Uncaught ReferenceError: FormField is not defined

Answer 1

You are using reduxForm at the bottom of your Login.js but are not importing it.

import { reduxForm } from 'redux-form';

You can find details of installing and getting started in their docs: https://redux-form.com/8.1.0/docs/gettingstarted.md/

Answer 2

You need to import reduxForm from redux-form library. Before you import make sure you install it

Using

npm i -s redux-form

And then import it in Login.js component

import { reduxForm } from 'redux-form';

Remove validate from reduxForm

Change

  Login = reduxForm({
        form: 'login',
        validate
    })(Login);

To

  Login = reduxForm({
        form: 'login'
    })(Login);

Validate is actually a prop to redux Field component

For example

     <Field
                                    label="Email Address"
                                    name="email"
                                    component={FormField}
                                    id="email"
                                    type="text"
                                    className="form-control"
                                    validate={[required, maxLength15, minLength2]}
                                />