React.js 自定义获取挂钩中的错误

Question

I have the following custom hook, useFetch , in my React (v18.1.0) project to fetch data from a Node.js server.

export default function useFetch(url, requestType, headers, body) {
  const [error, setError] = useState(false);
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  console.log('Inside useFetch hook');
  useEffect(() => {
    console.log('Inside useEffect in the useFetch hook');
    const controller = new AbortController();
    async function retrieveData(reqUrl) {
      try {
        console.log('Inside the useFetch try block');
        const res = await fetchData(
          reqUrl,
          requestType,
          headers,
          body,
          controller.signal
        );
        console.log('Done with fetch; this is the server response ', res);
        setData(res);
        setLoading(false);
        console.log('Done with useFetch try block.');
      } catch (err) {
        if (err.name === 'AbortError') {
          console.log('Fetch aborted');
        } else {
          setError(true);
          setData(err);
          setLoading(false);
        }
      }
    }
    retrieveData(url);
    return () => {
      controller.abort();
    };
  }, []);
  return { loading, error, data };
}

My useFetch hook uses a function called fetchData to send a fetch request to the server.

async function fetchData(url, requestType, headers, payload, abortSignal) {
  console.log('Inside the fetch function');
  let res = await fetch(url, {
    method: requestType,
    headers: headers,
    body: payload,
    signal: abortSignal ? abortSignal : null,
  });
  if (res.ok) {
    const resJson = await res.json();
    console.log('Returning value from fetch function');
    return { status: res.status, response: resJson };
  } else {
    await fetchErrorHandler(res);
  }
}

The useFetch hook is invoked once in my VideoPlayer component.

function VideoPlayer() {
  const { videoId } = useParams();
  const url = `http://localhost:5000/videos/${videoId}`;
  const { loading, error, data } = useFetch(url, 'GET', {}, null);

  return (
    <div>
      {loading && <div />}
      {!loading && error && <h2>{data.message}</h2>}
      {!loading && !error && (
        <video width={600} height={450} controls src={data.response.videoUrl}>
          Cannot display video player.
        </video>
      )}
    </div>
  );
}

The problem I'm facing is that when the VideoPlayer component is mounted to the DOM and useFetch is called, the execution flow looks like this: Execution flow of useFetch hook . As is seen in the image, everything seems fine until the line Inside the fetch function is printed in the console. After this, the useEffect hook within the useFetch is called again, for reasons I'm unable to understand (my dependency array is empty and, moreover, there's no state change at this point). Then, it tries to execute the fetch another time, aborts it, and then eventually returns a response, presumably to the original fetch request. At the end of this process, useFetch is called yet again. If anyone can help me shed some light on why the hook is behaving this way, instead of simply executing the fetch request once and returning the response, I will greatly appreciate it.

Answer 1

I assume you use React in StrictMode - this is the default for apps created with create-react-app.

In strict mode, effects can fire twice while in development mode. You can verify that this causes your problem by running a production build. If the problem goes away, it is likely caused by StrictMode.

My suggestion is to not change anything - actually, your code seems to work fine: the first effect execution triggers a fetch, then the second effect execution aborts the initial fetch and fetches for a second time. This is exactly, what the code is expected to do.

Answer 2

You can use axios to deal with API