redux 表单服务器端验证

IT技术 reactjs redux react-redux redux-form redux-thunk
2022-08-03 01:43:17

我一直在设置 redux 表单的服务器端验证。我有一个注册表单并完美地执行了客户端验证,但是在服务器端验证中,我无法理解如何使用相应的输入字段显示来自服务器的错误消息。

API 请求

 const createMemberRegistration = user => {
  return dispatch => {
  dispatch({ type: POST_REQUEST });
   processMemberRegistration(user)
   .then(user => {
    dispatch({ type: REGISTRATION_SUCCESS });
    dispatch(reset('memberregistration'));
  })
  .catch(err => {
    dispatch({ type: REGISTRATION_ERROR,payload:err });
  });
  };
 };

零件

 // submit button
 submitSignup(values) {
  var registerfields = JSON.stringify({
   first_name: values.firstname.trim(),
   last_name: values.lastname.trim(),
   email: values.email.trim(),
   password: values.password.trim()
 });
 if (registerfields) {
  this.props.createMemberRegistration(registerfields);
 }
}

//binding with redux form
const reduxmemberregistration = reduxForm({
 form: "memberregistration",
 validate:isvalidMemberRegistration,
 asyncValidate,
 enableReinitialize: true
})(MemberRegistration);

异步函数

卡在这里做什么以及如何验证各自的领域

 const asyncValidate = (values, dispatch, props) => {
  return new Promise((resolve, reject) => {
   if(values.email){ // i get the value from the form,so what to do here?
    // so should i need to send request all the time to server for each 
      field for validation or what?
  }
 }
});
};
1个回答

假设您有一个代表表单状态的对象,并且您有一些error与表单上的字段具有相同属性的属性。

假设它看起来像这样

formState: {name : 'Test', error: {name: null} }

并且您正在输入下呈现一些错误消息或使用基于 this 的某个类装饰无效输入字段formState.error.name

在这种情况下,您可能会从服务器获取响应对象,该对象还包含一些输入特定信息并将其存储在例如formState.serverError错误中。因此,一旦从后端获取数据,您将使用此验证向 Redux 存储发布一个操作,如果有一些错误,您将填充相应的错误并显示适当的错误消息。

输入字段有效性的条件现在看起来像formState.error.name && formState.serverError.name