ReduxForm和ReactRouter - 表单不呈现

问题描述 投票:1回答:2

我在我的第一个反应应用程序上重构了一些代码,这是一个简单的登录表单,重定向并在成功登录时呈现项目列表。我有一个连接到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
2个回答
1
投票

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


0
投票

只有少数轻微的出口/进口缺失。

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

© www.soinside.com 2019 - 2024. All rights reserved.