hooks
hooks copied to clipboard
useDeepCompareEffect在依赖未变更的情况下,异常执行。
在使用useDeepCompareEffect时,依赖了一个对象,当对象变更时会将对象赋值给Form组件,当表单项更改会使得传入对象被修改,此时useDeepCompareEffect的data并没有改变,但useDeepCompareEffect会判断依赖变了,执行副作用,导致表单编辑内容丢失。 原因:useDeepCompareEffect存储依赖时是进行的浅拷贝,获取依赖对Form组件赋值时没有克隆,表单项修改导致传入对象被修改导致下一次hook执行时判断依赖更新了。 代码如下所示:
const Demo = (props)=> {
const {data} = props;
const formRef = useRef(null);
useDeepCompareEffect(()=> {
const curFormData = data;
formRef. setFieldValue(curFormData);
}, [data])
return <Form ref={formRef}>more </Form>
}