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

【问题标题】：Infinite loop where useEffect is being re called on re-render even when dependancy value is unchanged即使依赖值未更改，在重新渲染时也会调用 useEffect 的无限循环
【发布时间】：2020-08-15 03:07:38
【问题描述】：

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

在一个文件中，我声明了以下内容。本质上，我想要实现的是返回一个有状态的 errors 响应，仅当 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 都是组件上的 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 catch 并调用 setErrors 并将其发送到无限循环。例如，如果“title”字段为空字符串，则有一个验证条件确定该字段无效。

我认为问题在于，即使 value 的内容没有从之前的渲染。我似乎无法理解为什么。

【问题讨论】：

标签： reactjs use-effect

【解决方案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])
);

【讨论】：