useDeepCompareEffect在依赖未变更的情况下,异常执行。
- Dominant language
- TypeScript
- Stars
- 15k
- Forks
- 2.8k
- Avg merge
- 15h 7m
- Merged PRs (30d)
- 2
Description
在使用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 more
}
Contributor guide
Research direction
Start at the useDeepCompareEffect entry point and reproduce the Demo case where data is passed to the Form and then mutated by form edits. Verify when the effect reruns despite unchanged external data, and define done as preserving edited form values without an unnecessary effect execution. No specific source file or test is named in the issue.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100