Question

我想使用自定义钩子函数

自定义钩子代码

import { useState, useCallback, useEffect } from 'react';
import { apiClient } from './apiClient';

export default (api: string) => {
  const [data, setData] = useState();

  const getData = useCallback(async () => {
    try {
      const response = await apiClient.get(api);
      setData(response.data);
    } catch (err) {
      console.log(err);
    }
  }, [data]);

  return [data, getData];
};

应用代码

const [data, getData] = useGetData('posts');

  useEffect(() => {
    getData(); <- error
  }, []);

错误信息

无法调用可能是“未定义”的对象。ts(2722)

如何使用自定义钩子函数？

Answer 1

您需要显式键入函数以返回一个 2 元组，因为 TypeScript 无法完美地推断出这一点。它推断出一个数组。

export default (api: string): [any, () => void] => {

（或比 any 更好的类型，但我不知道您的 API 返回什么。）

为了改进输入，您可能希望将其设为通用函数：

import { useState, useCallback } from "react";

export default function useGetData<T>(api: string): [T | undefined, () => void] {
  const [data, setData] = useState<T | undefined>(undefined);
  const getData = useCallback(async () => {
    try {
      const response = await apiClient.get(api);
      setData(response.data as T);
    } catch (err) {
      console.log(err);
    }
  }, [data]);
  return [data, getData];
}

React 使用自定义钩子函数

1 个答案: