ReduxForm 和 ReactRouter - 表单不呈现答案

【问题标题】：ReduxForm and ReactRouter - Form Not RenderingReduxForm 和 ReactRouter - 表单不呈现
【发布时间】：2018-08-07 18:52:18
【问题描述】：

我正在重构我的第一个 react 应用程序中的一些代码，这是一个简单的登录表单，可在成功登录时重定向并呈现项目列表。我有一个表单容器，连接到 redux 商店，它应该呈现一个登录表单 - 用 reduxForm 装饰。我不明白为什么表单不呈现。

index.jsx

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <App />
    </Router>
  </Provider>,
  document.getElementById('app')
);

App.jsx

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

class App extends Component {
  render() {
    return (
      <Switch>
        <Route exact path='/' component={LoginFormContainer}/>
      </Switch>
    )
  }
}

export default App

LoginFormContainer.jsx

import LoginFormComponent from './LoginFormComponent';
import {reduxForm} from 'redux-form/immutable';
import {withRouter} from 'react-router-dom';

let LoginFormContainer = reduxForm({
    form: 'login',
})(LoginFormComponent)

const mapStateToProps = null
const mapDispatchToProps = dispatch => {
    return {
        onSubmit: loginFormValues => {
      dispatch(loginUser(loginFormValues))
    }
    }
}

const mergeProps = (stateProps, dispatchProps, ownProps) =>
    Object.assign({}, stateProps, dispatchProps, ownProps)

LoginFormContainer = withRouter(connect(mapStateToProps, mapDispatchToProps, mergeProps)(LoginFormContainer))

export default LoginFormContainer

LoginFormComponent.jsx

class LoginForm extends Component {
    render() {
    return (
      <Row>
        <Col xs={12} md={12}>
          <form>
            <FormGroup>
              <Field
                name="username"
                type="email"
                component={renderField}
                label="Username"
                validate={[required]}
              />
            </FormGroup>
            <FormGroup>
              <Field
                name="password"
                type="password"
                component={renderField}
                label="Password"
                validate={[required]} />
            </FormGroup>
            <button type="submit" className="btn btn-primary">Submit</button>
          </form>
        </Col>
      </Row>
    )
    }
}

export default LoginForm

【问题讨论】：

标签： reactjs react-redux redux-form react-router-dom

【解决方案1】：

只需从 App.jsx 中 LoginFormContainer 的导入中删除花括号即可解决问题。 import LoginFormContainer from './components/Login/LoginFormContainer'

【讨论】：

【解决方案2】：

只是缺少一些次要的导出/导入。

LoginFormContainer.jsx

import LoginFormComponent from './login_form_component';
import {reduxForm} from 'redux-form/immutable';
import {withRouter} from 'react-router-dom';

import { connect } from 'react-redux'; // missing import

// need to export these variables to be used below

export const LoginFormContainer = reduxForm({
  form: 'login',
})(LoginFormComponent)

export const mapStateToProps = null
export const mapDispatchToProps = dispatch => {
  return {
    onSubmit: loginFormValues => {
      dispatch(loginUser(loginFormValues))
    }
  }
}

// this is not needed 
// export const mergeProps = (stateProps, dispatchProps, ownProps) =>
//     Object.assign({}, stateProps, dispatchProps, ownProps)

// withRouter is not needed unless you need any of the 
// functionality here https://reacttraining.com/react-router/web/api/withRouter

export default connect(mapStateToProps, mapDispatchToProps)(LoginFormContainer)

LoginFormComponent.jsx

不确定您是否只是没有包含此文件的导入。确保里面有这个 import React, { Component } from 'react';

【讨论】：

为简洁起见，我将导入内容省略了。没有错误，只是没有呈现表单。