时间戳

首页 > 解决方案 > 即使依赖值未更改，在重新渲染时也会调用 useEffect 的无限循环

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

问题描述

我在下面得到一个无限循环，不知道为什么。

在一个文件中，我声明了以下内容。基本上我想要实现的是返回一个有状态的错误响应，只有当值针对两个模式发生变化时才通过重新验证值来更新（仅供参考，我使用的是 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);

}

我从我的反应组件中引用它，如下所示：

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

titleValue和descriptionValue都是组件上的 props。

组件本身如下所示：

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，这会导致父级重新渲染并将这些字段的值作为道具传回，其中再次通过myValidation运行。

在触发myValidation 捕获并调用 setErrors并将其发送到无限循环之前，这一切都可以正常工作。例如，如果“ title ”字段为空字符串，则有一个验证条件确定该字段无效。

我认为问题在于重新渲染的值（在 myValidation 中）在每次重新渲染时都被视为“已更改”，即使 value 的内容与之前的渲染相比没有改变。我似乎无法理解为什么。

标签： reactjsuse-effect

解决方案

可能正在发生的事情是您在每次渲染时创建一个新对象（使用 {}）并将其作为参数传递给 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])
);

推荐阅读