hooks icon indicating copy to clipboard operation
hooks copied to clipboard

useDeepCompareEffect在依赖未变更的情况下,异常执行。

Open Losstie opened this issue 1 year ago • 0 comments

在使用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>
}

Losstie avatar Jun 22 '24 14:06 Losstie