reactjs - 在函数 react 钩子(Hook)中访问函数参数

Question

我正在编写一个自定义 react 钩子(Hook)，用于从端点获取数据。这是函数的样子

import { useState } from "react";

const useHttp = async (endpoint, method, data) => {

    const [loading, setLoading] = useState(false)
    const [fetchedData, setfetchedData] = useState(null)

    setfetchedData(await fetch.method(endpoint));
    return [isLoading, fetchedData]
}

export default  useHttp;

如您所见，我想对传递给 useHttp 钩子(Hook)的任何方法执行获取请求。请有人指出我该怎么做？

Answer 1

你不能将异步函数传递给 React Hooks。您必须 useEffect

import { useState, useEffect } from "react";

const useHttp = (endpoint, method, options) => {
  const [isLoading, setLoading] = useState(false);
  const [fetchedData, setFetchedData] = useState(null);

  useEffect(() => {
    setLoading(true);

    fetch(endpoint, { method, ...options })
      .then(data => data.json())
      .then((json) => {
        // do something with JSON data
        setFetchedData(json);
      })
      .catch((err) => {
        // do something with err
      })
      .finally(() => {
        setLoading(false);
      });
  }, []);
  return [isLoading, fetchedData];
};

export default useHttp;