在不成功的 api 响应中阻止 redux-from 字段中的值

问题描述

我想在不成功的 API 响应中阻止 redux-form 字段中的值，以查看用户输入的错误，但是当我提交表单时，所有值都变得清晰，我尝试在 reudForm() 中尝试 destoryonUnmount 方法，但这不是一个好方法

    import { usedispatch,useSelector } from "react-redux";
import { SubmissionError } from "redux-form";

import Login from "../../components/Login";

function LoginPage() {
  
  const Formdata = async (Formvalues) => {
    const responsive = await dispatch(Action.Login(Formvalues));

    if (!!responsive.payload.accesstoken) {
    } else {
      throw new SubmissionError({
        _error: "Login Failed",});
    }
  };
  return <Login onSubmit={Formdata} />;
}

export default LoginPage;

这是我的表单配置

const validate = (values) => {
  const errors = {};
  const requiredFields = ["email","password"];
  requiredFields.forEach((field) => {
    if (!values[field]) {
      errors[field] = "required";
    }
  });

  return errors;
};

const LoginComponent = reduxForm({
  form: "LoginForm",validate,forceUnregisterOnUnmount: true,})(Login);

export default LoginComponent;

解决方法

我搜索了两三天找到了解决方案，因为没有人回答 在我的路由文件中，我必须使用 React.pureComponent 或 momo

<a href="#" class="clicker">test</a>
<a href="#" class="clicker">test</a>