ReduxForm 和 ReactRouter语言 - 表单不渲染

Question

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

索引.jsx

ReactDOM.render(
<Provider store={store}>
<Router>
<App />
</Router>
</Provider>,
document.getElementById('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

Answer 1

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

Answer 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';