如何在typescript中使用自定义钩子（获取）

IT技术 reactjs typescript react-hooks
2021-05-14 23:02:13

我创建了一个名为 useFetch 的自定义钩子。

import { useState, useEffect } from 'react'

export const useFetch = (url: string, options?: object) => {
    const [response, setResponse] = useState(null);
    const [error, setError] = useState(null);

    useEffect(() => {
      const fetchData = async () => {
        try {
          const res = await fetch(url, options);
          const json = await res.json();
          setResponse(json);
        } catch (error) {
          setError(error);
        }
      };
      fetchData();
    }, []);

    return { response, error };
  };

但是解构useFetch并用typescript打字失败，好像答案可能为空

import React, { FunctionComponent } from 'react'
import { useFetch } from '../../hooks/useFetch'

export const ListOfMovies: FunctionComponent = () => {
    const { response, error }: { response: object, error: object} = useFetch("http://www.omdbapi.com/?apikey=****&s=batman&page=2")
    
    if (!response) return <h2>Loading...</h2>

    if (error) return <h2>Error</h2>

    return (
        <div>
            <h2>Lista de películas</h2>
            {response.Search.map(movie => (
                <p>{movie.Title}</p>
            ))}
        </div>
    )
}
2个回答
  1. 您可以尝试将您的回复手动设置为“任何”
import { useState, useEffect } from 'react'

export const useFetch = (url: string, options?: object) => {
    const [response, setResponse] = useState<any>(null);
    const [error, setError] = useState<any>(null);
    ...
  };

...

  1. 如果您不喜欢“任何”，请尝试使用泛型。

    export const useFetch = <T>(url: string, options?: object) => {
    const [response, setResponse] = useState<T>(null);
    const [error, setError] = useState<T>(null);
    ...
  };

    }

所以函数调用看起来像

    type YourCustomType = {response: ..., error: ...}
    const { response, error }: { response: object, error: object} = 
    useFetch<YourCustomType>("http://www.omdbapi.com/?apikey=****&s=batman&page=2");

}

您已将 response 和 error 的初始值设置为 null，因此您收到此警告。

试试这个：

const [response, setResponse] = useState({});
const [error, setError] = useState({});
其它你可能感兴趣的问题
上一篇RTCPeerConnection 和 createDataChannel 不适用于 Edge 下一篇HTML5 Canvas 在圆圈中画线并随着音乐移动？