Question

错误消息是：错误：已超过最大更新深度。当组件重复调用componentWillUpdate或componentDidUpdate内部的setState时，可能会发生这种情况。 React限制了嵌套更新的数量以防止无限循环。

仅当我在Field组件的validate属性中添加 required 函数时，才会出现此问题。没有 required ，一切正常。我不明白为什么它不起作用...

import { Field, reduxForm } from "redux-form";
import React from "react";
import { email, minLength, required } from "../utils/formValidation";
import inputComponent from "./inputComponent";

let AuthForm = (props) => {
  const { handleSubmit } = props;
  const minLength8 = minLength(8);
  return (
    <form className='auth-form' onSubmit={handleSubmit} action='/projects'>
      <Field
        id='email'
        name='email'
        type='text'
        label='Email'
        component={inputComponent}
        placeholder='Email'
        validate={[required, email, minLength8]}
      />
      <Field
        id='password'
        name='password'
        label='Password'
        component={inputComponent}
        type='password'
        // validate={[minLength8, required]}
      />
      <button type='submit'>Sign in</button>
    </form>
  );
};

AuthForm = reduxForm({ form: "auth" })(AuthForm);
export default AuthForm;

验证功能

export const email = (value) =>
  value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)
    ? "Invalid email address"
    : undefined;

export const minLength = (min) => (value) =>
  value && value.length < min ? `Must be ${min} characters or more` : undefined;

export const maxLength = (max) => (value) =>
  value && value.length > max ? `Must be ${max} characters or less` : undefined;

export const required = (value) =>
  value || typeof value === "number" ? undefined : "Required";

输入组件

const inputComponent = ({
  input,
  label,
  type,
  meta: { touched, error, warning },
}) => (
  <div>
    <label>{label}</label>
    <div>
      <input {...input} placeholder={label} type={type} />
      {touched &&
        ((error && <span>{error}</span>) ||
          (warning && <span>{warning}</span>))}
    </div>
  </div>
);

Answer 1

当我将reduxForm组件的父包装到connect（）函数中时，我对其进行了修复

Answer 2

在我的情况下，需要在表单之前创建最小长度，也就是在连接导入之后。不要在 AuthForm 函数中创建 minLength 函数

字段组件中的reduxForm验证问题（错误：已超过最大更新深度）

2 个答案: