Question

在我的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"
        />
        <br />
        <Field
          name="password"
          component={renderField}
          type="password"
          placeholder="Password"
          label="Password"
        />
        <br />
        <Field
          name="passwordConfirmation"
          component={renderField}
          type="password"
          placeholder="Confirm Password"
          label="Confirm Password"
        />
        <br />
        {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状态出现了一些错误：

但由于某种原因，他们未能在道具中被传回。所以我的道具包含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/我看不到将错误道具传递给包装组件的引用。但我看到很多例子，我应该期待error传递reduxForm道具。

任何线索？

Answer 1

将每个字段错误传递给字段，并将通用错误（_）传递给表单。我认为你的代码应该有效。领域是否被触及？

redux-form没有显示错误

更新

1 个答案: