错误: App.tsx 中缺少 useCallback 依赖项,导致闭包过时且无法通过 ESLint 校验

错误

在 " flowchart/src/App.tsx " 中, " handleNext " 、 " handlePrev " 和 " handleReset " 的回调中,每个回调都省略了 " getNodes " 和 " Get Edgebisable " 从其 " useCallback " 的依赖数组中。 由于安装了slint-plugin-react-hooks'(v7)并使用lint'脚本运行ESLint,这导致npm run lint ' 以react-houks/ unble-deps ' 错误来失败**。

□ 受影响的代码

时间轴 : // handleNext – 获取节点并获得从道口丢失的可视性 Const handleNext = 使用Callback( () ) { { . . . . . . . . 设置节点( 获得节点( newCount) ); // 获得节点, 不在道口中 setEdges( 相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相相接相相相相接相接相接相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相 创建Edge( 客户, 获取Edge可视性( 客户, 新客户) ) // 获取Edge可视性, 不在 deps 中 页:1 ,[可看见的,设置的节点,设置的Edges]); ///← 不完整.

// handlePrev-同个问题 Const handlePrev = 使用回转( ()) {{{ . . . . . . . . 设置节点( 获得节点( newCount) ); // 获得节点, 不在道口中 setEdges( 相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相接相相接相相相相接相接相接相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相 创建Edge( 客户, 获取Edge可视性( 客户, 新客户) ) // 获取Edge可视性, 不在 deps 中 页:1 ,[可看见的,设置的节点,设置的Edges]); ///← 不完整.

// handle 重置 – 从道口中获取缺失的节点 Const handle 重置 = 使用Callback( () ) { { . . . . . . . . 设置节点( 获得节点(1)); // 获得节点不在道克中 . . . . . . . . , [设置节点, 设置Edges]]); // / + 不完整

□ 根源

" GetNodes " 和 " GetEdgebility " 是 " App " 部分内界定的简单功能。 每出戏都要重现 从“ 使用Callback” 道克中选择它们, 意味着召回会捕捉 stale 函数引用, 违反了 React shocks 详尽的道克规则 。

□ 影响

- `npm run lint ' ( " flowchart/ " 内含的 " flowchart/ " )没有 " react-hoks/ except-deps " 错误
- 未来在理论上可以使用 " GetNodes " / " GetEdgebility " ,如果功能在组件状态上关闭

□ 修补

将“GetNodes”和“GetEdgebisibility”包装在“useCallback”(或将其移出组件/转换为稳定的公用事业)中,然后将其添加到依赖的回调数组中。

时间轴 :
Const 得到节点 = 使用Callback(( 计数: 数字)) {{
Const stepNodes = 所有Steps.map((步骤,索引)) QQ
创建节点( 步骤, 索引 < 计数, 节点). current [ step.id]
(三)
指针 = 指针.map(注 {{}
可视性 = 数 * * 注。
返回创建NoteNode(注,注,可视性,节点.current. [note.id]);
* ;
返回[.步号,.注号];
*,[ ]);

Const 获得可视性 = 使用Callback(
(连:边缘接线类型 [0],可见StepCount:数) {{
cont sourceIndex = allSteps.findIndex(s => s.id === conn.source;).
目标Index = 全Steps.findIndex(s => s.id === conn.
返回源Index < 可见StepCount QQ目标Index < 可见StepCount;
{\fn华文楷体\fs16\1cHE0E0E0}
[
(三)

然后更新依赖的回调以包含:

时间轴 : cont handleNext = 使用Callback( () {{}, [可看见的Count, set Nodes, set Edges, get Nodes, get Edgebility]; ; ) ; ; Const handlePrev = 使用Callback( () {} {.}, [可视的Count, setNodes, . . . . . . .