在内部放置一个钩子并从那里调用它是否有效？

Question

VSCode 不会将其标记为无效，尽管钩子是有条件运行的：

function useHook() {
    return 1;
}
function useHook2() {
    const two = useMemo(() => 2, []);
    return two;
}

const hookDictionary = {
    useHook,
    useHook2
}

export function HookUser(index) { 
    let func = hookDictionary[index];
    func();
    return null;
}

这是故意的并且被认为是有效的吗？ 是不是因为使用了

hookDictionary

而被隐藏了？ 我的假设是这种情况，因为它在功能上与：

export function HookUser(index: string) { 
    let func = hookDictionary[index];
    if(index === 'useHook') {
        useHook();
    }
    else if(index === 'useHook2') {
        useHook2();
    }
    return null;
}

这确实会引发错误。

Answer 1

考虑这段代码：

export function Test() {
    const [index, setIndex] = useState<'useHook' | 'useHook2'>('useHook2');
    HookUser(index);
    return (
        <div>
            <Button onClick={() => setIndex((prev) => (prev === 'useHook' ? 'useHook2' : 'useHook'))} />
        </div>
    );
}

其中HookUser和你的一样。我一点击按钮就会崩溃。

在这种情况下，您的 IDE 似乎假设索引不会更改（因为 HookUser 内部没有条件）。

您可以单独导出这些钩子，这样就不会出现这样的错误。

或者你也可以这样做

function useSuperHook() {
    ...someContext

    function useHook() {
        return 1;
    }
    function useHook2() {
        const two = useMemo(() => 2, []);
        return two;
    }
    
    return { useHook, useHook2 };
}

// in some component

const { useHook } = useSuperHook();