I implemented it while referring to the following article. https://www.robinwieruch.de/react-hooks-fetch-data/

the useFetch code is here.

export const useFetchData = () => {
  // Data;
  const [dataContents, setDataContents] = useState([]);
  // URL;
  const [url, setUrl] = useState('http://example.com');
  // Loading Status
  const [isLoading, setIsLoading] = useState(true);
  // Error Status
  const [isError, setIsError] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true);
      setIsError(false);
      try {
        const { data } = await axios(url);
        setDataContents(data.contents);
      } catch (error) {
        console.error('failed to fetch the data.');
        setIsError(true);
      }
      setIsLoading(false);
    };

    fetchData();
  }, [url]);

  return [{ dataContents, isLoading, isError }, setUrl];
};

I will assign it the following way.

const [{ dataContents, isLoading, isError }, doFetch]= useFetchData();

Here is each type of returned variable.

// dataContents is here:
type dataContents = {
  variable01: string;
  variable02: {
    [key: string]: string;
  };
  variable03: {
    [key: string]: string;
  };
  [key: string]: string | object;
};

// isLoading is boolean,
// isError is boolean.

I tried this:

type fetchedData = [
  {
    dataContents: dataContents;
    isLoading: boolean;
    isErrof: boolean;
  },
  doFetch: (url: string) => void
];

// Error occurred.
const [{ dataContents, isLoading, isError }, doFetch]: fetchedData= useFetchData();

How to solve this... Please help.

CodePudding user response：

You should probably explicitly type the useFetchData function's return value because its inferred value would be any[].

export const useFetchData = (): fetchedData => {
  // Data;
  const [dataContents, setDataContents] = useState([]);
  // URL;
  const [url, setUrl] = useState('http://example.com');
  // Loading Status
  const [isLoading, setIsLoading] = useState(true);
  // Error Status
  const [isError, setIsError] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true);
      setIsError(false);
      try {
        const { data } = await axios(url);
        setDataContents(data.contents);
      } catch (error) {
        console.error('failed to fetch the data.');
        setIsError(true);
      }
      setIsLoading(false);
    };

    fetchData();
  }, [url]);

  return [{ dataContents, isLoading, isError }, setUrl];
};

Secondly, your fetchedData type is a tuple, and you're naming only the second item doFetch. Tuples should have all items named or not named, so define it as:

type fetchedData = [
  {
    dataContents: QuestionData;
    isLoading: boolean;
    isError: boolean;
  },
  (url: string) => void
];

or,

type fetchedData = [
  obj: {
    dataContents: QuestionData;
    isLoading: boolean;
    isError: boolean;
  },
  doFetch: (url: string) => void
];