我已经使用TypeScript编写了一些React代码,它利用了来自Redux的useCallback钩子和dispatch函数。不幸的是,代码导致无限循环,我不知道如何修复它。
下面是我的代码:
const onSelect = useCallback(
(
event: React.SyntheticEvent<HTMLDivElement, Event>,
property: keyof OperationsDefinition
) => {
const customEvent = event as unknown as CustomEvent;
const options = customEvent.detail.options;
const value = options.length ? options[0].id : "";
dispatch(
setEditedElement({
...(editedElement as Element),
[property]: value,
})
);
},
[editedElement?.hierarchyScopeId]
);
电话:
{data && editedElement && (
<DropdownHierarchy
onSelect={(event) => {
onSelect(event, "hierarchyScopeId");
}}
search
configuration={{
data,
selectedElementsIds: [
editedElement.hierarchyScopeId,
],
}}
/>
)}
DropdownHierarchy是外部组件,我无法编辑它。
当我调用onSelect函数(该函数被传递给DropdownHierarchy组件)时,代码福尔斯无限循环,并一直调用onSelect和重新呈现。问题似乎是由于使用了调度函数,但我不确定如何修复它。
有人能帮我诊断这个问题并提出解决方案吗?
1条答案
按热度按时间insrf1ej1#
从React docs for useCallback:
dependencies
:fn代码中引用的所有React值的列表。响应式值包括props、state以及所有直接在组件体内声明的变量和函数。如果你的linter是为React配置的,它会验证每个reactive值是否被正确地指定为依赖项。依赖项列表必须有一个常量项,并像[dep1,dep2,dep3]一样内联编写。React将使用www.example.com比较算法将每个依赖项与其先前的值进行比较Object.is。根据此信息,依赖项列表缺少值。
顺便说一句,无限循环通常是由useEffect函数中缺少条件语句引起的。