带有类型记录的自定义钩子

Question

我一直在学习自定义钩子，并希望在我的应用程序中重复的代码块上实现它们。重复块是一个try-catch块，用于从API中获取数据。

钩子：

const useFetch = (url: string, method: string) => {
    const [data, setData] = useState(null);
    const [errorMsg, setErrorMsg] = useState('');

    useEffect(() => {
        (async () => {
            try {
                const response = await api({ url, method });
                setData(response.data);
            } catch (error) {
                error instanceof Error && setErrorMsg(error.message);
            }
        })();
    }, [url, method]);

    return { data, errorMsg };
};

export default useFetch;

这是实现钩子之前来自组件的代码：

const Productivity = () => {
    const [productivity, setProductivity] = useState<IUser[]>([]);
    const [errorMsg, setErrorMsg] = useState<string>('');

    useEffect(() => {
        (async () => {
            try {
                const response = await api({ url: '/api/productivity', method: 'GET' });
                response.users && setProductivity(response.users);
            } catch (error) {
                error instanceof Error && setErrorMsg(error.message);
            }
        })();
    }, []);

    return <div>{productivity.length > 0 ? <ProductivityTable productivity={productivity} /> : <AlertMessage errorMsg={errorMsg} />}</div>;
};

同一组成部分的更新版本：

const Productivity = () => {
    const { data: productivity, errorMsg } = useFetch('/users', 'GET');
    

    return (
        <div>
            {errorMsg && <AlertMessage errorMsg={errorMsg} />}
            {productivity && <ProductivityTable productivity={productivity} />}
        </div>
    );
};

如果我运行这个应用程序，一切都运行的很顺利，但是我注意到{生产率}是“从不”的类型。那是什么意思？如何将生产力类型设置为IUser数组？我需要吗？我不知道这里的最佳做法是什么。

Answer 1

使用返回数据类型的参数，将钩子更改为泛型函数：

function useFetch<T>(url: string, method: string) {
  const [data, setData] = useState<T | null>(null);
  // the rest stays the same
};

用法：

const { data: productivity, errorMsg } = useFetch<IUser[]>('/users', 'GET');