在onSubmit上使用redux操作时,可以通过以下步骤来管理react final form上的提交错误:
下面是一个示例代码:
// Redux reducer
const initialState = {
error: null
};
const formReducer = (state = initialState, action) => {
switch (action.type) {
case 'SET_SUBMIT_ERROR':
return {
...state,
error: action.payload
};
default:
return state;
}
};
// Redux action
const setSubmitError = (error) => ({
type: 'SET_SUBMIT_ERROR',
payload: error
});
// Form component
const FormComponent = ({ error, setSubmitError }) => {
const onSubmit = async (values) => {
try {
// Submit form data
// ...
} catch (error) {
setSubmitError('提交错误:' + error.message);
}
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
{/* Form fields */}
{/* ... */}
{/* Error message */}
{error && <div>{error}</div>}
{/* Submit button */}
<button type="submit">提交</button>
</form>
);
};
// Connect form component to Redux store
const mapStateToProps = (state) => ({
error: state.form.error
});
const mapDispatchToProps = (dispatch) => ({
setSubmitError: (error) => dispatch(setSubmitError(error))
});
export default connect(mapStateToProps, mapDispatchToProps)(FormComponent);
在上述示例中,我们创建了一个名为formReducer的Redux reducer来管理表单的提交错误。在表单组件中,我们使用react-redux的connect函数将表单组件连接到Redux store,并将错误字段作为props传递给表单组件。在表单组件的onSubmit回调函数中,我们通过调用Redux store的dispatch方法来触发提交错误的action,并将错误信息作为payload传递给action。在表单组件中,我们使用react-final-form的Subscription组件来订阅错误字段的变化,并根据错误字段的值来显示或隐藏错误信息。
请注意,上述示例中的代码仅为示意,实际应用中可能需要根据具体情况进行适当的修改和调整。
领取专属 10元无门槛券
手把手带您无忧上云