字段组件中存在reduForm验证问题(错误:超过了最大更新深度)

Question

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

只有在Field组件的validate属性中添加必需的函数时，才会出现此问题。如果不需要，一切都会很好。我不明白为什么它不起作用。。。

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

当我将reduForm组件的父级封装到connect((函数中时，我修复了它

Answer 2

在我的例子中，有必要在表单之前创建最小长度，也就是在连接导入之后。不要在AuthForm函数中创建minLength函数