ReactJS登錄頁面未顯示

Question

我正在學習本教程： reactjs-and-laravel ---通過基本設置運行--- part-2-20p

但我無法顯示登錄頁面的內容。 我有：

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

哪個導入到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'))

我究竟做錯了什么？

---

控制台給我：

未捕獲ReferenceError：未定義reduxForm

---

現在它給了我Uncaught ReferenceError：未定義驗證

---

現在我得到：

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

以及：

Uncaught ReferenceError: FormField is not defined

Answer 1

您正在Login.js底部使用reduxForm，但未導入它。

import { reduxForm } from 'redux-form';

您可以在他們的文檔中找到安裝和入門的詳細信息： https : //redux-form.com/8.1.0/docs/gettingstarted.md/

Answer 2

您需要從redux-form庫導入reduxForm。 導入之前，請確保已安裝

運用

npm i -s redux-form

然后將其導入Login.js組件

import { reduxForm } from 'redux-form';

從reduxForm刪除驗證

更改

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

至

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

驗證實際上是對Redux Field組件的支持

例如

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