Question

我在下面陷入无限循环，无法弄清原因。

在一个文件中，我声明了以下内容。本质上，我想要实现的是返回有状态的错误响应，只有在针对两个模式更改 value 时，才通过重新验证 value 来更新该响应（仅供参考，我正在使用YUP，但这无关紧要）

export const myValidation = (validationSchema: any, requiredSchema: any, value: any) => {
    const [errors,setErrors] = useState([{}]);
    useEffect(() => {
            Promise.all([
                validationSchema.validate(value, { abortEarly: false }),
                requiredSchema.validate(value, { abortEarly: false })])
                .catch(error => {
                    let _errors = error.inner.map((err: any) => {
                        let path = err.path;
                        let message = err.message;
                        return { [path]: message };
                    });
                    setErrors(_errors);
                });
      },[value]); 

    return Object.assign({}, ...errors);

}

我正在从我的react组件中引用以下内容：

    const errors =  myValidation(requiredSchema,validationSchema,{
    title: titleValue, 
    description: descriptionValue
});

titleValue 和 descriptionValue 都是组件上的道具。

组件本身看起来像这样：

export default function TitleDescriptionSection({titleValue, descriptionValue, onChange, disabled}: Props) {

const errors =  myValidation(requiredSchema,validationSchema,{
    title: titleValue, 
    description: descriptionValue
});
console.log(errors);
return (
    <Card><Card.Section>
        <FormLayout>
            <TextField type="text" label="Title" value={titleValue}
                       onChange={(value) => onChange({title: value, description: descriptionValue})}
                       disabled={disabled} error={errors ? errors.title : null}/>
            <RichTextField label='Description' value={descriptionValue}
                           onChange={(value: string) => onChange({title: titleValue, description: value})}
                           disabled={disabled} error={errors ? errors.description : null}/>
        </FormLayout>
    </Card.Section>
    </Card>

);

}

当字段值更改时，它们会调用 onChange ，这会导致父级重新渲染并将这些字段的值传递回props中，再次通过 myValidation 运行

在触发 myValidation catch 并调用 setErrors 并将其发送到无限循环之前，所有这些操作都很好。例如，有一个验证条件，如果为空字符串，则确定“ 标题”字段无效。

我认为问题在于，即使值的内容未从初始更改，重新渲染的 value （在myValidation中）也被视为在每次重新渲染时都“已更改”以前的渲染。我只是似乎不知道为什么。

Answer 1

可能正在发生的事情是，您正在每个渲染中创建一个新对象（使用{}），并将其作为参数传递给myValidation函数。您的错误集可能会触发父组件上的渲染，该渲染将重新渲染并重新创建该值。该值被认为已更改，因为您正在创建一个新对象。如果您记住对象替换：

{
    title: titleValue, 
    description: descriptionValue
}

具有类似备忘录的版本

React.useMemo({
    title: titleValue, 
    description: descriptionValue
}, [titleValue, descriptionValue])

仅当titleValue或descriptionValue的值发生更改时才创建对象，并且不会发生无限循环

函数调用的最终代码如下：

const errors =  myValidation(requiredSchema,validationSchema,
    React.useMemo({
        title: titleValue, 
        description: descriptionValue
    }, [titleValue, descriptionValue])
);

无限循环，即使依赖项值未更改，也会在重新渲染时调用useEffect

1 个答案: