Javascript Redux表单：如何处理表单组件中的错误

现在我有这样的错误：

Unhandled Rejection (SubmissionError): Submit Validation Failed

  27 |       .catch(err => {
> 28 |         return ErrorHandler.raiseAnError(err);
  29 |       });

这是我的密码：

TractorForm.js

import React, { Component } from "react";
import PropTypes from "prop-types";
import { reduxForm } from "redux-form";
import FormInput from "../Shared/FormInput";
import GlobalConst from "../GlobalConst";
import { Link } from "react-router-dom";
import SelectInput from "../Shared/SelectInput";
import ErrorHandler from "../ErrorHandler";

const manufacturers = ["DAF", "VOLVO", "SCANIA", "MAN", "IVECO"];

class TractorFormWrapper extends Component {
  state = {
    loading: false,
    isSubmitted: false
  };

  onFormSubmit = e => {
    e.preventDefault();

    this.setState({ isSubmitted: true });
    if (this.props.valid) {
      this.setState({ loading: true });
      this.props
        .handleSubmit(e)
        .then(() => alert("is ok!"))
        .catch(err => {
          return ErrorHandler.raiseAnError(err);
        });
    }
  };

  render() {
    const { submitText, error } = this.props;
    const { loading, isSubmitted } = this.state;
    const formClassNames = loading ? "ui form loading" : "ui form";
    return (
      <form className={formClassNames} onSubmit={this.onFormSubmit}>
        <div className="ui grid fields">
          <div className="sixteen wide eight wide computer column">
            <SelectInput
              name="manufacturer"
              type="text"
              label="Производитель"
              validations={[GlobalConst.REQUIRED]}
              isSubmitted={isSubmitted}
              values={manufacturers}
            />
          </div>

          <div className="sixteen wide eight wide computer column">
            <FormInput
              name="model"
              type="text"
              label="Модель"
              validations={[GlobalConst.REQUIRED]}
              isSubmitted={isSubmitted}
            />
          </div>

          <div className="sixteen wide column">
            <FormInput
              name="description"
              type="textarea"
              label="Описание"
              isSubmitted={isSubmitted}
            />
          </div>
        </div>

        {error && (
          <div className="ui red message">
            <strong>{error}</strong>
          </div>
        )}

        <div className="ui fluid buttons">
          <button
            className="ui primary button"
            type="submit"
            disabled={loading}
          >
            {submitText}
          </button>

          <Link to="/tractors" className="ui button">
            Отмена
          </Link>
        </div>
      </form>
    );
  }
}

let TractorForm = {};

TractorForm.propTypes = {
  submitText: PropTypes.string
};

TractorForm.defaultProps = {
  submitText: "Отправить"
};

TractorForm = reduxForm({
  form: "tractor"
})(TractorFormWrapper);

export default TractorForm;

import React, { Component } from "react";
import TractorForm from "./TractorForm";
import TractorApi from "./TractorApi";
import { toast } from "react-semantic-toasts";
import ErrorHandler from "../ErrorHandler";

class TractorAdd extends Component {
  state = {};

  submit = values =>
    TractorApi.create(values).then(
      () => {
        toast({
          type: "success",
          icon: "truck",
          title: "Тягач создан",
          description: ""
        });
        this.props.history.push("/tractors");
      },
      error => {
        return Promise.reject(error);
      }
    );

  render() {
    return (
      <div>
        <TractorForm onSubmit={this.submit} submitText="Создать" />
      </div>
    );
  }
}

export default TractorAdd;

import { SubmissionError } from "redux-form";

export default {
  raiseAnError: error => {
    if (
      error.response.data.hasOwnProperty("message") &&
      error.response.data.hasOwnProperty("stackHighlighted")
    ) {
      throw new SubmissionError({
        _error: error.response.data.hasOwnProperty("message") || "error"
      });
    } else {
      const errKeys = Object.keys(error.response.data);
      const errObj = {};
      for (const errItem of errKeys) {
        errObj[errItem] = error.response.data[errItem]["message"];
      }

      errObj["_error"] = "Произошла ошибка!";

      throw new SubmissionError(errObj);
    }
  }
};

为什么我需要这个表单而不是添加组件？所以我可以用

加载
状态变量来修复逻辑，然后重新提交表单

另外，由于某些原因，我的
\u错误
不起作用，但我已经完成了文档中的所有操作：

我做错了什么以及如何处理表单组件中的SubmissionError？
错误处理不起作用的原因是您应该在
handleSubmit
函数本身中抛出新的
SubmissionError
：


更新2-保持实现原样，但稍微更改一下您的
TractorFormWrapper
onFormSubmit
及其用法：

文件说明

TractorForm

class TractorFormWrapper extends Component {
  state = {
    loading: false,
    isSubmitted: false
  };

  onFormSubmit = data => {

    this.setState({ isSubmitted: true });
    if (this.props.valid) {
      this.setState({ loading: true });

      // `onSubmit` comes from `TractorAdd`
      return this.props.onSubmit(data)
        .then(() => alert("is ok!"))
        .catch(err => {
          return ErrorHandler.raiseAnError(err);
        });
    }
  };

  render() {
    const { handleSubmit } = this.props

    return <form onSubmit={handleSubmit(this.onFormSubmit)}>The rest logic is here ...</form>
  }
}

let TractorForm = {};

TractorForm.propTypes = {
  submitText: PropTypes.string
};

TractorForm.defaultProps = {
  submitText: "Отправить"
};

TractorForm = reduxForm({
  form: "tractor"
})(TractorFormWrapper);

export default TractorForm;

类TractorFormWrapper扩展组件{
状态={
加载：false，
提交的问题：错误
};
onFormSubmit=数据=>{
this.setState（{isSubmitted:true}）；
if（this.props.valid）{
this.setState（{loading:true}）；
//“onSubmit”来自“tractorad”`
返回此.props.onSubmit（数据）
。然后（（）=>警报（“正常！”）
.catch（错误=>{
返回ErrorHandler.raiseAnError（err）；
});
}
};
render（）{
const{handleSubmit}=this.props
返回剩余的逻辑在这里。。。
}
}
设TractorForm={}；
TractorForm.propTypes={
submitText:PropTypes.string
};
TractorForm.defaultProps={
提交文本：“ааааааа”
};
TractorForm=reduxForm({
表格：“拖拉机”
})（拖拉机式包装机）；
导出默认TractorForm；
ok，但是如何
this.props.handleSubmit（e）.then（（）=>alert（“is ok！”））.catch（err=>{return ErrorHandler.raiseAnError（err）；}）在这里陷入困境？这也是一个非常糟糕的主意：在表单组件中编辑和添加相同的代码表单：这就是为什么我使用
formAdd
组件和“嵌套的”
form
组件：表单是隔离的，服务器调用是在另一个逻辑组件中添加的。这几乎是一个完整的示例。请按照我回答的反馈意见和我为您提供的示例进行操作。谢谢，但您仍然缺少一个非常重要的部分：
handleSubmit
未在表单组件中重新定义=>我无法添加ui微调器加载程序和禁用按钮。
onFormSubmit=e=>{e.preventDefault（）；this.setState（{issubmitt:true}）；//因此，只有当（this.props.valid）{//表单有效时，我才能在单击提交按钮时显示错误消息。让我们将其发送到服务器，而不是当this.setState（{loading:true}）无效时；//让我们显示微调器this.props.handleSubmit（e）。然后（（）=>警报（“ok！”）//在这里，我们必须隐藏微调器，不做任何其他事情……捕获（err=>{return ErrorHandler.raiseAnError（err）；//这里我们必须隐藏微调器，并在将来需要时执行其他操作，但它总是进入。然后阻塞：（）}；}；
例如：如果我写
error=>{throw new error（{}）；}
-一切都很好，然后形成组件（）.catch（）转到catch block，但当我使用SubmissionError时，它会转到then（就像promise是可以的，但它不是！）
<form className={formClassNames} onSubmit={handleSubmit(values => {
 // 1. Your submit logic should be here.
 // 2. Better to organize it in a stand-alone function, as `submit` function from the above example.
 // 3. If you throw SubmissionError here, the error handling will work.
 throw new SubmissionError({
   _error: 'Error'
 })
)}>

class TractorForm extends Component {

  render() {
    const { handleSubmit, error } = this.props;
    return (
      <form onSubmit={handleSubmit}>

        // Rest input fields should be here ...

        { error && (
          <div className="ui red message">
            <strong>{error}</strong>
          </div>
        )}

        <div className="ui fluid buttons">
          <button
            className="ui primary button"
            type="submit"
            disabled={loading}
          >
            {submitText}
          </button>
        </div>
      </form>
    );
  }
}

export default reduxForm({
  form: "tractor"
})(TractorForm);

class TractorAdd extends Component {

  onSubmit (values) {
    // Please make sure here you return the promise result. It's a `redux-form` gotcha.
    // If you don't return it, error handling won't work.
    return TractorApi.create(values).then(
      () => {
        toast({
          type: "success",
          icon: "truck",
          title: "Тягач создан",
          description: ""
        });
        this.props.history.push("/tractors");
      },
      error => {
        // 1. Here you should throw new SubmissionError.
        // 2. You should normalize the error, using some parts of `ErrorHandler` function
        throw new SubmissionError(error)
      }
    );
  }

  render() {
    return <div>
      <TractorForm onSubmit={this.onSubmit} submitText="Создать" />
    </div>
  }
}

export default TractorAdd;

class TractorFormWrapper extends Component {
  state = {
    loading: false,
    isSubmitted: false
  };

  onFormSubmit = data => {

    this.setState({ isSubmitted: true });
    if (this.props.valid) {
      this.setState({ loading: true });

      // `onSubmit` comes from `TractorAdd`
      return this.props.onSubmit(data)
        .then(() => alert("is ok!"))
        .catch(err => {
          return ErrorHandler.raiseAnError(err);
        });
    }
  };

  render() {
    const { handleSubmit } = this.props

    return <form onSubmit={handleSubmit(this.onFormSubmit)}>The rest logic is here ...</form>
  }
}

let TractorForm = {};

TractorForm.propTypes = {
  submitText: PropTypes.string
};

TractorForm.defaultProps = {
  submitText: "Отправить"
};

TractorForm = reduxForm({
  form: "tractor"
})(TractorFormWrapper);

export default TractorForm;