在 Visual Studio Code 中使用 useCallback() 获取 Typescript 错误答案

【问题标题】：Getting a Typescript error with useCallback() in Visual Studio Code在 Visual Studio Code 中使用 useCallback() 获取 Typescript 错误
【发布时间】：2020-08-03 18:44:48
【问题描述】：

我是 React 钩子的新手，并且遇到过以下代码： const multiply = useCallback((value: number) => value * multiplier, [multiplier]); （来自https://medium.com/@jrwebdev/react-hooks-in-typescript-88fce7001d0d）

这让我和 Visual Studio Code 感到困惑，它会报告此错误： Cannot find name 'multiplier'. Did you mean 'multiply'?ts(2552)

我觉得我对 Typescript 相当了解，但我不了解 [乘数] 或如何解决此问题。我想这是正确的打字稿（它似乎确实可以编译）。有人可以向我解释这种语法是如何工作的以及如何让 Visual Code Studio 接受它吗？或者是否需要修复？

【问题讨论】：

该错误与其说是类型错误，不如说是使用您尚未定义的变量的情况。您是否有定义变量 multiplier 的较早代码行，可能有错字？

标签： reactjs typescript usecallback

【解决方案1】：

该页面上的完整示例如下：

const multiplier = 2;
// inferred as (value: number) => number
const multiply = useCallback((value: number) => value * multiplier, [multiplier]);

Which compiles just fine.

multiplier 这里只是一个在某处定义的变量。它可以是像上面的代码一样的常量，也可以是从组件状态中提取的东西，或者来自 API 调用。它没有什么特别之处，只是一个局部变量，需要在使用前定义。

而[multiplier] 仅表示multiplier 是数组中的唯一值。在这种情况下，值为[2]。它表示回调的依赖关系。如果任何依赖项发生更改，将重新创建回调。所以需要有一种方法来传递多个依赖项。在这种情况下，只有一个：multiplier。因此，您传入一个数组，其中包含单个项目 [multiplier]。

【讨论】：

哦，哇，这里简直是脑残——谢谢。尽管如此，看起来我试图做的事情是行不通的，这是有一个组件来呈现一个项目列表，每个项目都有自己的 onClick 处理程序，包装在 useCallback 中并包含一个唯一索引（以指定单击的内容））。我是否认为通常的方法是将每个列表条目放入自己的组件中并通过道具传递索引？
这发生在我们最好的人身上 :)
还有最糟糕的。 ;) 我用另一个问题更新了我的问题。