Блог

Я хочу использовать пользовательскую функцию крючка

пользовательский код крючка

 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)

Как можно использовать функцию пользовательского крючка ?

Вам нужно будет явно ввести функцию, чтобы вернуть 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];
}