首页 文章

redux-form没有显示错误

提问于
浏览
0

在我 redux-form 我有麻烦显示错误回到表单,

这是我的表格:

import React, { Component } from "react";
import { connect } from "react-redux";

import {
  registerUser,
  signOutUser
} from "../../actions/redux-token-auth-config";
import { Field, reduxForm, SubmissionError } from "redux-form";

import { FormDiv, SubmitButton, Title, Working } from "./styles";

const renderField = ({ input, label, type, meta: { touched, error } }) =>
  <div>
    <label>
      {label}
    </label>
    <div>
      <input {...input} placeholder={label} type={type} />
      {touched &&
        error &&
        <span>
          {error}
        </span>}
    </div>
  </div>;

const errorsFrom = response => response.response.data;

const signUp = (data, dispatch, props) => {
  return dispatch(props.registerUser(data))
    .then(response => dispatch(signOutUser(data)))
    .catch(response => {
      throw new SubmissionError(errorsFrom(response));
    });
};

const SignUp = props => {
  const { error, handleSubmit, pristine, submitting } = props;
  return (
    <FormDiv>
      <Title>subscribe</Title>
      <form onSubmit={handleSubmit(signUp)}>
        <Field
          name="email"
          component={renderField}
          type="text"
          placeholder="Email"
          label="Email"
        />
        
<Field name="password" component={renderField} type="password" placeholder="Password" label="Password" />
<Field name="passwordConfirmation" component={renderField} type="password" placeholder="Confirm Password" label="Confirm Password" />
{error && <strong> {error} </strong>} <SubmitButton type="submit" disabled={pristine || submitting}> Sign Up </SubmitButton> {submitting && <Working />} </form> </FormDiv> ); }; const ReduxFormSignUp = reduxForm({ form: "signup" })(SignUp); const mapStateToProps = (state, props) => { return { error: state.form.signup && state.form.signup.submitErrors ? state.form.signup.submitErrors.errors : null }; }; const mapDispatchToProps = dispatch => { return { registerUser }; }; export default connect(mapStateToProps, mapDispatchToProps)(ReduxFormSignUp);

提交后,我在redux状态下出现了一些错误:

redux state

但由于某种原因,他们没有被传回道具 . 所以我的道具包含 handleSubmit, pristine, submitting 但没有 error 道具 . 无论我是否使用我的 mapStateToProps

更新

文档和库之间似乎存在不一致之处,我没有看到将错误传递给此处https://github.com/erikras/redux-form/blob/master/src/createField.js中的字段的引用,如下所述:https://redux-form.com/7.2.3/docs/api/field.md/#usage

同样在这里:https://redux-form.com/7.2.3/docs/api/reduxform.md/我看不到将错误道具传递给包装组件的引用 . 但我看到很多例子,我应该期待 reduxForm 传递 error 道具 .

有线索吗?

1 回答

  • 0

    每个字段错误都传递给字段,并将通用错误( _ )传递给表单 . 我认为你的代码应该有效 . 领域是否触及?

相关问题