React版本:17.0.1
重现步骤
使用@typescript-eslint/parser作为解析器来设置eslint
转换传递给useEffect
的函数
import {useCallback, useEffect} from 'react';
type F = (...args: unknown[]) => void;
function MyComp() {
const foo = useCallback(() => {}, []);
// OK
useEffect(() => {
foo();
}, [foo]);
// WARNS?
useEffect((() => {
foo();
}) as F, [foo]);
return 'Hello, world'
}
链接到代码示例:https://github.com/0x24a537r9/exhaustive-deps-bug的最大值
当前行为
报告了以下错误
14:2 warning React Hook useEffect received a function whose dependencies are unknown. Pass an inline function instead
预期行为
该规则应正确解释函数参数,并知道它已内联。
4条答案
按热度按时间xlpyo6sf1#
它看起来似乎很容易支持,但问题是:你为什么要这么做?
rdrgkggo2#
呵呵,一个公平的问题。在我的例子中,我需要它来支持一个钩子的泛型,这个钩子可以帮助管理异步调用的状态,比如突变:
如果没有强制转换,TS就不知道args对象的形状是相同的。在return语句中,TS警告:
即使我把args也变成泛型类型,这仍然是正确的,所以我认为这个问题是不可避免的。
exdqitrt3#
@0x24a537r9 TS在此处是正确的。与
F
具有相同输入类型和返回类型的函数不能赋值给F
。F
可能还附加了其他属性,这些属性不会附加到doActionWithState
。对于您的特定情况,
doActionWithState
的类型可以是与F
具有相同参数和返回类型的函数,但不应该是F
。将其转换为F
是对typescript撒谎。xxslljrj4#
啊。谢谢@Shrugsy!有了这个提示,我就能修复我的类型并消除演员阵容。
也就是说,我建议保持这个问题的开放性,因为总是会有一些情况,人们将不得不求助于这样的强制转换,无论是由于TS的表达能力的限制,还是(在这个例子中,我怀疑大多数情况下)人们理解类型复杂性和正确指定类型的能力的限制。遗憾的是,当类型变得复杂时,并不是每个人都可以访问@Shrugsy来帮助他们。