React能否定义无UI组件？自定义Hook调用报错求解决方案

你的问题出在自定义Hook的调用方式上——useExample是一个自定义Hook函数，不是包含方法的对象，不能直接通过useExample.getSomething调用。必须先在组件的顶层执行这个Hook，拿到它返回的方法后，才能调用该方法。

正确实现步骤 #

1. 保留自定义Hook的定义 #

你的useExample Hook本身逻辑没问题，它封装了状态和方法，可直接沿用：

import { useState } from 'react';

export const useExample = () => {
    const [someVariable, setSomeVariable] = useState('someValue');

    const getSomething = (parameter1, parameter2) => {
        // 可直接使用内部状态someVariable实现业务逻辑
        return `处理结果：${parameter1} | ${parameter2} | ${someVariable}`;
    };

    return {
        getSomething,
        // 若需外部访问/修改状态，可一并返回
        someVariable,
        setSomeVariable
    };
};

2. 在组件中正确调用Hook #

必须在组件的顶层作用域执行useExample（这是React Hook的强制规则，不能在useEffect、循环、条件判断内调用），拿到返回的方法后再在useEffect中使用：

import { useEffect } from 'react';
import { useExample } from './useExample';

function SomeComponent(props) {
    // 组件顶层调用Hook，获取方法和状态
    const { getSomething, someVariable } = useExample();

    useEffect(() => {
        // 此时可正常调用getSomething方法
        const result = getSomething('参数A', '参数B');
        console.log(result);
    }, [getSomething]); // 将getSomething加入依赖数组，或用useCallback优化

    return (
        <div>
            <p>当前状态值：{someVariable}</p>
        </div>
    );
}

额外优化：减少不必要重渲染 #

如果getSomething方法会导致依赖数组频繁变化，可用useCallback包裹，避免useEffect不必要触发：

import { useState, useCallback } from 'react';

export const useExample = () => {
    const [someVariable, setSomeVariable] = useState('someValue');

    const getSomething = useCallback((parameter1, parameter2) => {
        return `处理结果：${parameter1} | ${parameter2} | ${someVariable}`;
    }, [someVariable]); // 仅当someVariable变化时，才重新创建方法

    return {
        getSomething,
        someVariable,
        setSomeVariable
    };
};

关于无UI组件的说明 #

React中“无UI组件”的需求，本质就是自定义Hook的应用场景——它不需要返回JSX，专门封装状态逻辑和方法供其他组件复用。你的初始思路是正确的，只是调用方式有误。如果需要多个组件共享同一状态，可结合Context实现：将Hook的状态和方法放入Context Provider，让子组件共享统一状态。

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