ReduxForm и ReactRouter - форма не рендеринг

neridaj спросил: 03 февраля 2018 в 11:08 в: reactjs

Я рефакторинг кода в своем первом приложении для реагирования, который представляет собой простую форму входа, которая перенаправляет и отображает список элементов при успешном входе в систему. У меня есть контейнер форм, связанный с магазином redux, который должен отображать форму входа в систему - украшенную сокращением. Я не понимаю, почему форма не рендеринга.

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

0 ответов