首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

redux-form:如何在Promise中抛出新的SubmissionError?

redux-form是一个用于处理表单状态的库,它可以与React一起使用。在处理表单提交时,我们可以使用Promise来处理异步操作,并在需要时抛出SubmissionError来显示表单提交错误。

要在Promise中抛出新的SubmissionError,我们可以按照以下步骤进行操作:

  1. 首先,确保你已经安装了redux-form库,并在你的代码中引入它。
  2. 在处理表单提交的函数中,可以使用async/await或者返回一个Promise来处理异步操作。例如:
代码语言:txt
复制
import { SubmissionError } from 'redux-form';

const submitForm = async (values) => {
  try {
    // 异步操作,例如发送表单数据到服务器
    const response = await fetch('/api/submit', {
      method: 'POST',
      body: JSON.stringify(values),
    });

    if (!response.ok) {
      // 如果服务器返回错误状态码,抛出SubmissionError
      const errorData = await response.json();
      throw new SubmissionError(errorData);
    }

    // 处理成功提交的情况
  } catch (error) {
    // 处理其他错误
  }
};

在上面的代码中,我们使用了fetch函数发送表单数据到服务器,并根据服务器的响应来判断是否抛出SubmissionError。如果服务器返回错误状态码,我们将响应数据作为SubmissionError的参数抛出。

  1. 在提交表单的组件中,将submitForm函数传递给redux-form的handleSubmit函数,并在表单的onSubmit事件中调用它。例如:
代码语言:txt
复制
import { reduxForm } from 'redux-form';

const MyForm = (props) => {
  const { handleSubmit } = props;

  const onSubmit = (values) => {
    handleSubmit(submitForm)(values);
  };

  return (
    <form onSubmit={onSubmit}>
      {/* 表单字段 */}
    </form>
  );
};

export default reduxForm({
  form: 'myForm',
})(MyForm);

在上面的代码中,我们将submitForm函数作为handleSubmit的参数传递,并在表单的onSubmit事件中调用它。

这样,当表单提交时,redux-form将会调用submitForm函数,并在异步操作中抛出SubmissionError,从而显示表单提交错误。

关于redux-form的更多信息和使用方法,你可以参考腾讯云的相关产品文档:redux-form产品介绍

请注意,以上答案仅供参考,具体实现方式可能因项目需求和代码结构而有所不同。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

何在keras添加自己优化器(adam等)

2、找到keras在tensorflow下根目录 需要特别注意是找到keras在tensorflow下根目录而不是找到keras根目录。...一般来说,完成tensorflow以及keras配置后即可在tensorflow目录下python目录中找到keras目录,以GPU为例keras在tensorflow下根目录为C:\ProgramData...找到optimizers.pyadam等优化器类并在后面添加自己优化器类 以本文来说,我在第718行添加如下代码 @tf_export('keras.optimizers.adamsss') class...# 传入优化器名称: 默认参数将被采用 model.compile(loss=’mean_squared_error’, optimizer=’sgd’) 以上这篇如何在keras添加自己优化器...(adam等)就是小编分享给大家全部内容了,希望能给大家一个参考。

44.9K30

前端魔法堂——异常不仅仅是trycatch

Promise.reject也异常,怎么办? 404等网络请求异常真心要后之后觉吗? 一.异常还是错误?它会如何影响我们代码?  ...同步代码"就是说无法获取setTimeout、Promise等异步代码异常,也就是说try/catch仅能捕获当前任务异常,setTimeout等异步代码是在下一个EventLoop执行。...一般而言我们会throw一个Error或其子类实例(throw Error()),其实我们throw任何类型数据(throw 1,throw "test",throw true等)。...Promise.reject产生未被catch异常,window.onerror也是无能为力。 六.Promise.reject也异常,怎么办?  ...方法 在工厂方法或then回调函数异常 // 方式1 Promise.reject("anything you want") // 方式2 new Promise(function(resolve

1.1K30

前端魔法堂——异常不仅仅是trycatch

Promise.reject也异常,怎么办? 404等网络请求异常真心要后之后觉吗? 一.异常还是错误?它会如何影响我们代码?  ...同步代码"就是说无法获取setTimeout、Promise等异步代码异常,也就是说try/catch仅能捕获当前任务异常,setTimeout等异步代码是在下一个EventLoop执行。...一般而言我们会throw一个Error或其子类实例(throw Error()),其实我们throw任何类型数据(throw 1,throw "test",throw true等)。...Promise.reject产生未被catch异常,window.onerror也是无能为力。 六.Promise.reject也异常,怎么办?  ...方法 在工厂方法或then回调函数异常 // 方式1 Promise.reject("anything you want") // 方式2 new Promise(function(resolve

1.4K70

前端异常埋点系统初探

) 无法第一时间通知开发人员异常发生 不知道用户OS与浏览器版本、请求参数(页面ID);而对于页面逻辑是否错误问题,通常除了用户OS与浏览器版本外,需要是报错堆栈信息及具体报错位置。...js异常特点是,出现不会导致JS引擎崩溃,最多只会终止当前执行任务。 回归正题,我们该如何在程序异常发生时捕捉并进行对应处理呢?在Javascript,我们通常有以下两种异常捕获机制。...异步任务抛出异常(执行时try catch已经从执行完了) promise(异常内部捕获到了,并未往上异常,使用catch处理) 语法错误(代码运行前,在编译时就检查出来了错误) 优点:能够较好地进行异常捕获...,主要是promise内部异常,统一给 onerror window.addEventListener("unhandledrejection", (e) => { throw e.reason;...类似mouseover事件报错应该考虑防抖般处理 后记 至此,我们总结了几种异常捕获做法,并完成了对前端程序异常上报功能,这对开发和测试人员都有较大意义,用一句或说便是,要对产品保持敬畏之心

93120

从0到1,构建完整前端异常监控系统

) 无法第一时间通知开发人员异常发生 不知道用户OS与浏览器版本、请求参数(页面ID);而对于页面逻辑是否错误问题,通常除了用户OS与浏览器版本外,需要是报错堆栈信息及具体报错位置。...js异常特点是,出现不会导致JS引擎崩溃,最多只会终止当前执行任务。 回归正题,我们该如何在程序异常发生时捕捉并进行对应处理呢?在Javascript,我们通常有以下两种异常捕获机制。...异步任务抛出异常(执行时try catch已经从执行完了) promise(异常内部捕获到了,并未往上异常,使用catch处理) 语法错误(代码运行前,在编译时就检查出来了错误) 优点:能够较好地进行异常捕获...,主要是promise内部异常,统一给 onerror window.addEventListener("unhandledrejection", (e) => { throw e.reason;...类似mouseover事件报错应该考虑防抖般处理 后记 至此,我们总结了几种异常捕获做法,并完成了对前端程序异常上报功能,这对开发和测试人员都有较大意义,用一句或说便是,要对产品保持敬畏之心

64720

前端异常埋点系统初探

) 无法第一时间通知开发人员异常发生 不知道用户OS与浏览器版本、请求参数(页面ID);而对于页面逻辑是否错误问题,通常除了用户OS与浏览器版本外,需要是报错堆栈信息及具体报错位置。...js异常特点是,出现不会导致JS引擎崩溃,最多只会终止当前执行任务。 回归正题,我们该如何在程序异常发生时捕捉并进行对应处理呢?在Javascript,我们通常有以下两种异常捕获机制。...异步任务抛出异常(执行时try catch已经从执行完了) promise(异常内部捕获到了,并未往上异常,使用catch处理) 语法错误(代码运行前,在编译时就检查出来了错误) 优点:能够较好地进行异常捕获...,主要是promise内部异常,统一给 onerror window.addEventListener("unhandledrejection", (e) => { throw e.reason;...类似mouseover事件报错应该考虑防抖般处理 后记 至此,我们总结了几种异常捕获做法,并完成了对前端程序异常上报功能,这对开发和测试人员都有较大意义,用一句或说便是,要对产品保持敬畏之心

62130

从0到1,构建完整前端异常监控系统

) 无法第一时间通知开发人员异常发生 不知道用户OS与浏览器版本、请求参数(页面ID);而对于页面逻辑是否错误问题,通常除了用户OS与浏览器版本外,需要是报错堆栈信息及具体报错位置。...js异常特点是,出现不会导致JS引擎崩溃,最多只会终止当前执行任务。 回归正题,我们该如何在程序异常发生时捕捉并进行对应处理呢?在Javascript,我们通常有以下两种异常捕获机制。...异步任务抛出异常(执行时try catch已经从执行完了) promise(异常内部捕获到了,并未往上异常,使用catch处理) 语法错误(代码运行前,在编译时就检查出来了错误) 优点:能够较好地进行异常捕获...,主要是promise内部异常,统一给 onerror window.addEventListener("unhandledrejection", (e) => { throw e.reason;...类似mouseover事件报错应该考虑防抖般处理 后记 至此,我们总结了几种异常捕获做法,并完成了对前端程序异常上报功能,这对开发和测试人员都有较大意义,用一句或说便是,要对产品保持敬畏之心

88210

面试官:你是怎么处理vue项目中错误

一、错误类型 任何一个框架,对于错误处理都是一种必备能力 在Vue ,则是定义了一套对应错误处理规则给到使用者,且在源代码级别,对部分必要过程做了一定错误处理。...另外,如果任何被覆盖钩子或处理函数返回一个 Promise 链 (例如 async 函数),则来自其 Promise错误也会被处理 生命周期钩子 errorCaptured是 2.5.0 新增一个生命钩子函数...如果一个组件继承或父级从属链路存在多个 errorCaptured 钩子,则它们将会被相同错误逐个唤起。...throw err // 判断err信息是否相等,避免log两次 // 如果抛出新错误信息throw err Error('你好毒'),将会一起log输出...判断环境,选择不同错方式。

1.1K20

不使用回调函数ajax请求实现(async和await简化回调函数嵌套)

因为没辙啊, 试想一下,ajax回调函数中使用return语句, 意义何在?因此也只能变向通过Promise将返回值扔给外部调用者。...所以,使用async和await第一个要点就是 当函数要获得异步结果时,可以函数声明为async类型, 函数返回值设为Promise类型对象,而Promiseresolve和reject是用来向...另一种方法是在调用函数时加上await关键字,await意义就在于接收async函数Promise对象resolve和reject传递值 ,而且除非resolve和reject这两个函数在回调函数中被调用到了...所以, 第二个要点就是 await就是用来等待Promise对象resolve和reject这两个函数执行,并且将这两个函数传递参数当作返回结果赋给变量,如同run函数代码示例那样。...至于Promisereject,就是用来异常, 在外await调用之外可使用try catch捕获,代码如下 此文只是纯粹讲解 await和async能起什么样作用?如何使用?

2.7K50

基于TypeScript封装Axios笔记(八)

取消功能设计与实现 需求分析 有些场景下,我们希望能主动取消请求,比如常见搜索框案例,在用户输入过程,搜索框内容也在不断变化,正常情况每次变化我们都应该向服务端发送一次请求。...接着我们在 xhr.ts 插入一段取消请求逻辑。...接着我们对 CancelToken 类 reason 类型做修改,把它变成一个 Cancel 类型实例。 先修改定义部分。...cancelToken 已经被使用过,那么我们甚至都可以不发送这个请求,只需要一个异常即可,并且异常信息就是我们取消原因,所以我们需要给 CancelToken 扩展一个方法。...cancelToken 是否已经使用过了,如果已经被用过则不用法请求,直接异常。

66210

手写一个符合Promise A+规范Promise实现

, reject) => { let caller = false // 定义一个开关,为了让promise状态一旦确定则不能再做修改 // 如果promise是它自己,避免自己等待自己,直接错...then方法执行时发现状态未变,则订阅then方法执行 完成 Or 拒绝 回调 this.doneCallbacks = [] this.failCallbacks = []...// 将递归解析resolve参数直到不是一个promise对象 return doneValue.then(resolve, reject) } // 判断只有是等待状态时候才进行成功处理...// 如果是个空数组,那么将直接变为完成状态,并传入空数组参数值 if (promisesLength === 0) return resolve([]) // 遍历数组...) && isFunction(promise.then)) { promise.then( (value) => { // 向结果数组存入

59930

ES11屡试不爽新特性,你用上了几个?

许多编程语言支持多种数字类型,浮点型、双精度型、整数型和双精度型,但JS却不是这样。在JS,按照IEEE 754-2008标准定义,所有数字都以双精度64位浮点格式表示。...确切地说,JS Number类型只能安全地表示-9007199254740991 (-(2^53-1)) 和9007199254740991(2^53-1)之间整数,任何超出此范围整数值都可能失去精度...XXX of undefined,抛出无法从未定义数据读取某个字段 可选链运算符在查找嵌套对象时,找到链第一个undefined或者null后会立即终止,并返回undefined,而不会不断向下查找而导致错...,我们通常进行数据安全检查来访问嵌套对象,否则将错 if(obj&&obj.foo&&obj.foo.bar){ console.log(obj.foo.bar.baz) // 42 } 在可选链运算符可使用现在...baz) //42 Dynamic Import 动态导入 在标准import导入,是静态导入,所有被导入模块是在加载时就被编译,无法按需编译。

60242

ES11屡试不爽新特性,你用上了几个?

Promise实例包装成一个新Promise实例。...许多编程语言支持多种数字类型,浮点型、双精度型、整数型和双精度型,但JS却不是这样。在JS,按照IEEE 754-2008标准定义,所有数字都以双精度「64位浮点格式」表示。...,抛出无法从未定义数据读取某个字段 可选链运算符在查找嵌套对象时,找到链第一个「undefined」或者「null」后会立即终止,并返回「undefined」,而不会不断向下查找而导致错 const...,我们通常进行数据安全检查来访问嵌套对象,否则将错 if(obj&&obj.foo&&obj.foo.bar){ console.log(obj.foo.bar.baz) // 42 } 在可选链运算符可使用现在...baz) //42 Dynamic Import 动态导入 在标准import导入,是静态导入,所有被导入模块是在加载时就被编译,无法按需编译。

53910

2023 React 生态系统,以及我一些吐槽……

它主要由两部分组成: 一个开发服务器,它基于 原生 ES 模块 提供了 丰富内建功能,速度快到惊人 模块热更新(HMR)。...(可能是编程中最难事情之一) 将多个请求相同数据重复请求合并为单个请求 在后台更新“过时”数据 了解数据何时“过时” 尽快反映数据更新 性能优化,分页和惰性加载数据 管理服务器状态内存和垃圾回收...RTK Query 从先驱解决数据获取问题其他工具( Apollo Client、React Query、Urql 和 SWR)获得灵感,但在其 API 设计增加了独特方法: 数据获取和缓存逻辑是构建在...由于大约有 30 个独特表单,很快就明显发现,我们可以通过标准化不仅是输入组件,还有数据在表单流动方式来获益。 为什么不使用 Redux-Form?...Redux-Form 大小是 22.5 kB(经过最小化和 gzip 压缩),而 Formik 大小是 12.7 kB。

56830

99%程序都没有考虑网络异常

绝大多数程序只考虑了接口正常工作场景,而用户在使用我们产品时遇到各类异常,全都丢在看似 ok try catch 。...如果没有做好异常兼容和兜底处理,会极大影响用户体验,严重还会带来安全和资损风险。 接口异常,通常可以分为以下三类: CGI 逻辑出错。调用方入参缺失类业务逻辑报错; 服务不稳定。...服务器不稳定导致 nginx 各类 500、502,cgi 路径调整导致 404 用户网络环境差。...,网络不稳定、网速慢、运营商劫持等 那么,我们在写代码时,如何快速模拟这些接口异常,做好程序兼容处理呢?...() 会异常,我们可以提前 catch 住: fetch(`/mock?

1.5K80
领券