Question

我正在关注本教程：reactjs-and-laravel---running-through-a-basic-setup---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]}
                                />

ReactJS登录页面未显示

2 个答案: