Reactjs 如何将自定义钩子（获取）与typescript一起使用

我已经创建了一个名为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>
    )
}

import React，{FunctionComponent}来自“React”
从“../../hooks/useFetch”导入{useFetch}
导出常量ListOfMovies:FunctionComponent=（）=>{
const{response，error}:{response:object，error:object}=useFetch（'http://www.omdbapi.com/?apikey=****&s=蝙蝠侠和page=2”）
如果（！响应）返回加载。。。
if（error）返回错误
返回(
佩利库拉斯酒店
{response.Search.map（movie=>(
{movie.Title}

))}
)
}

您已将响应和错误的初始值设置为null，因此您将收到此警告

试试这个：

const [response, setResponse] = useState({});
const [error, setError] = useState({});

您可以尝试手动将响应设置为“任意”

从'react'导入{useState，useffect}
export const useFetch=（url:string，options？：object）=>{
const[response，setResponse]=useState（null）；
const[error，setError]=useState（null）；
...
};

如果您不喜欢“any”，请尝试使用泛型

export const useFetch=（url:string，options？：object）=>{
const[response，setResponse]=useState（null）；
const[error，setError]=useState（null）；
...
};

}

所以函数调用看起来像

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

}

type YourCustomType={响应：…，错误：…}
常量{response，error}:{response:object，error:object}=
useFetch（“http://www.omdbapi.com/?apikey=****&s=蝙蝠侠和page=2“；
}

Any不应被建议，因为它违背了使用Typescript的主要目标，应该在没有其他选项的情况下使用。我认为公认答案中给出的通用解决方案是错误的，并且会给出语法错误。您能否验证通用方法是否适用于您？