alibaba / alibaba/hooks

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

Open
#2,575 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.