React自定义钩子调用报错：goodsSetupWizardController不是函数

核心问题1：自定义Hook命名违反React规范 #

React 自定义Hook必须以use开头，这是React识别Hook的强制约定。你的函数名goodsSetupWizardController不符合该规则，会导致React无法正确处理内部的useState等Hook调用，进而引发执行异常。

核心问题2：Hook调用位置不符合规则 #

你在普通函数getProductTypeSetupWizard中调用了自定义Hook，而React Hook仅允许在以下场景调用：

• React函数组件的顶层代码中
• 其他自定义Hook的顶层代码中

普通函数内调用Hook完全违反规则，这是触发错误的关键原因。

修复步骤 #

步骤1：修正自定义Hook命名 #

将函数名改为以use开头，同时确保导入useState：

import { useState } from 'react';

const useGoodsSetupWizardController = (props) => {
    const [product, setProduct] = useState(props.product);

    const getComponent = (step) => {
        //...
    };

    const isNextButtonDisabled = (step) => {
        //...
    };

    const needsNextStepToBeSkipped = (direction) => {
        //...
    };

    return {
        getComponent,
        isNextButtonDisabled,
        needsNextStepToBeSkipped
    };
}

export default useGoodsSetupWizardController;

步骤2：调整Hook调用位置 #

不能在普通函数getProductTypeSetupWizard内调用Hook，需将逻辑移至React组件或其他自定义Hook的顶层。例如在productSetupWizard.component.js组件中调用：

import useGoodsSetupWizardController from '../components/managementInterface/shop/tabs/productSetupWizard/setups/goodsSetupWizard.controller';

export default function ProductSetupWizard() {
    // 组件内顶层调用Hook
    const controller = useGoodsSetupWizardController({ product, step });
    // ... 后续使用controller的逻辑
}

额外检查 #

确认导入路径无拼写错误，注意Linux/macOS环境下文件名区分大小写，文件扩展名（.js/.jsx）需匹配。

补充说明 #

如果后续移除了useState等Hook逻辑，该函数仅作为普通工具函数使用，只需确保导出、导入及参数传递正常即可。但当前代码依赖useState，必须严格遵循Hook规则。

内容的提问来源于stack exchange，提问作者dns_nx