我想为我的项目做一个可重用的http钩子，并使用abortController作为清理函数。

import { useState, useEffect } from 'react';

const useHttp = (url = {}, opts = {}) => {
  const [resData, setResData] = useState(null);
  const [error, setError] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [status, setStatus] = useState(null);

  useEffect(() => {
    if (url === '') return;

    const controller = new AbortController();
    const { signal } = controller;

    setIsLoading(true);

    const fetchData = async () => {
      try {
        const response = await fetch(url, {
          method: opts.method || 'GET',
          body: opts.body || undefined,
          headers: opts.headers || {
            'Content-Type': 'application/json',
          },
          credentials: 'include',
          signal,
        });

        const data = await response.json();
        console.log(data);
        const resStatus = response.status;

        // setResData(data);
        setError(null);
        setIsLoading(false);
        setStatus(resStatus);
      } catch (err) {
        // setResData(null);
        setError(err);
        setIsLoading(false);
        setStatus(500);
      }
    };

    fetchData();

    return () => {
      controller.abort();
    };
  }, [url, opts]);

  return { resData, error, isLoading, status };
};

export default useHttp;

我发现只有在设置resData状态时才会发生无限循环，但我不知道为什么。
因为我发现很多例子里面也设置了respsonse状态的数据钩子。
有人能给我指出来吗？