javascript - 承诺一个 redux 表单 onSubmit 函数
问题描述
我想让我的 submitForm 用于 redux 表单 onSubmit 处理被承诺。
与此处找到的示例相同https://redux-form.com/7.1.2/examples/submitvalidation/
submitForm = () => {
return this.props.submituserForm()
.then(() => { console.log('test') })
.catch(() => { console.log('error') })
}
-----------------------------------
const mapDispatchToProps = (dispatch) => {
// i want to promisify submituserForm to behave like the sleep
// function below
return {
submituserForm: () => dispatch(submit())
}
};
////////////////////////////////////////////////////
// this part is working fine
const submit = () => {
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
// simulate server latency
return sleep(5000)
.then(() => { console.log('test') };
}
解决方案
我相信你在想这个错误的方式。redux-form
已经有一种在提交表单时处理承诺(“承诺”)的机制。从文档:
如果您的 onSubmit 函数返回一个承诺,则提交属性将设置为 true,直到该承诺被解决或拒绝。如果它被包含在表单 { field1: 'error', field2: 'error' } 中的错误的 redux-form SubmissionError 拒绝,那么提交错误将被添加到每个字段(到 error prop),就像异步验证错误一样. 如果存在不特定于任何字段但适用于整个表单的错误,则可以将其传递为好像是名为 _error 的字段的错误,并将作为错误属性给出。
这将起作用:
// submit.js
import { SubmissionError } from "redux-form";
export const submit = (values, dispatch, props) => {
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
// simulate server latency
return sleep(5000)
.then(() => { console.log('test') })
.catch(() => {
console.error('error');
throw new SubmissionError({ _error: 'There was an error submitting.' });
});
}
// MyForm.js
import React from "react";
import { reduxForm, ... } from "redux-form";
import { submit } from "submit";
class MyForm extends React.Component {
...
render() {
const { error, handleSubmit } = this.props;
return (
<form onSubmit={handleSubmit}>
...
{error && <strong>{error}</strong>}
<button type="submit" value="Submit">Submit</button>
</form>
)
}
};
export default reduxForm({
form: "MyForm",
onSubmit: submit
})(MyForm);
有关如何在提交表单时处理承诺的更详细说明,请参阅此示例。
推荐阅读
- selenium - 如何使用 selenium python 使检查窗口处于活动状态?
- android - 使用 Android 分析器时应用程序不断崩溃
- c# - 当客户端超时断开连接时,WCF ServiceHost 崩溃单声道
- go - 返回的参数太多
- python - 检测 __getattribute__ 调用是否是由于 hasattr
- c# - 轮询传感器数据后 UWP C# 更新 XAML UI
- hadoop - Apache Kylin 是否需要 Apache Derby 或 Mysql 来运行示例多维数据集
- ruby - Minimax 算法 Ruby Tic Tac Toe
- widget - 使用 Flutter RefreshIndicator,您能分辨出它是从 onRefresh 的顶部还是底部拉出的?
- python - 无法在 Mac 上运行“keyboard.is_pressed”