React+TypeScript：使用useFetch hook时静态方法this未定义问题求助

我是React和TypeScript新手，正在学习React Hooks。遇到一个搞不懂的问题：

自定义数据获取Hook：

export const useFetch = <T>(
    fetchFunc: () => Promise<Response>,
    initialValue: T
) => {
    const [value, setValue] = useState<T>(initialValue);

    const fetchData = () =>
        fetchFunc()
            .then((res) => {
                if (res.ok) return res;
                throw new HttpFetchError(res);
            })
            .then(async (x) => await x.json())
            .then((x) => setValue(x as T));

    return [value, fetchData] as const;
};

我有一个用于API请求的静态类（直接调用时一切正常）：

export class TestFetchClient {
    static client?: HttpFetchClient;

    static Init = (baseUrl?: string) =>
        (this.client = new HttpFetchClient(baseUrl, "/api/"));

    static async GetBored() {
        if (this.client == null) throw new Error("Init first!");

        return await this.client.Request({
            request: "activity",
            method: "GET",
        });
    }
    // ...
}

当尝试用useFetch Hook时，GetBored()方法里报错：访问已初始化的client时提示“this未定义”。我猜是调用GetBored()时丢失了类的上下文。想知道这是什么原因，以及怎么解决才能在这个场景下访问client变量？

使用示例：

export default function SamplePage2() {
    const [value, fetchValue] = useFetch(TestFetchClient.GetBored, {});

    useEffect(() => {
        // 这里抛出上述错误
        fetchValue();

        // 这种调用方式正常工作
        TestFetchClient.GetBored().then((x) =>
            x.json().then((y) => console.log(y))
        );
    }, []);

    useEffect(() => {
        console.log(value);
    }, [value]);

    return <h1>This is SamplePage 2</h1>;
}

错误信息：

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'client')
    at GetBored (TestFetchClient.ts:10:1)
    at fetchData (useFetch.ts:30:1)
    at SamplePage2.tsx:12:1

当你把TestFetchClient.GetBored作为参数传递给useFetch时，只是传递了这个方法的函数引用，没有保留它和TestFetchClient类的绑定关系。静态类方法的this默认指向类本身，但当方法被单独提取出来调用时，在严格模式（TypeScript/JavaScript默认模式）下this会变成undefined。

而直接调用TestFetchClient.GetBored()时，this会自动绑定到TestFetchClient类，所以能正常访问static client。

1. 用箭头函数包装后传递 #

在调用useFetch时，用箭头函数包裹GetBored调用，自动捕获上下文：

const [value, fetchValue] = useFetch(() => TestFetchClient.GetBored(), {});

这种方式最简单，箭头函数会确保GetBored内部的this指向TestFetchClient。

2. 将静态方法改为箭头函数 #

修改TestFetchClient的GetBored为箭头函数，让它的this永久绑定到类本身：

export class TestFetchClient {
    static client?: HttpFetchClient;

    static Init = (baseUrl?: string) =>
        (this.client = new HttpFetchClient(baseUrl, "/api/"));

    // 改为箭头函数
    static GetBored = async () => {
        if (TestFetchClient.client == null) throw new Error("Init first!");
        // 直接用类名访问静态属性，避免this问题
        return await TestFetchClient.client.Request({
            request: "activity",
            method: "GET",
        });
    };
}

箭头函数没有自身的this，直接通过类名访问静态属性更稳妥。

3. 手动绑定this #

在传递参数时，用bind方法强制把GetBored的this绑定到TestFetchClient：

const [value, fetchValue] = useFetch(TestFetchClient.GetBored.bind(TestFetchClient), {});

这种方式通过bind方法固定上下文，确保调用时this指向正确。

内容的提问来源于stack exchange，提问作者Valentin Weiß