0

我编写了一个自定义钩子来帮助我不为某些 fetch 调用重复代码。它看起来像这样：

export const useCustomQuery = ({ endpoint, body, dataPoint }: args) => {
    const [data, setData] = useState()
    useEffect(() => {
        fetch(`http://localhost:4000/${endpoint}`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body,
        })
            .then((res) => res.json())
            .then((res) => {
                if (dataPoint) {
                    setData(JSON.parse(res.data[dataPoint]))
                }
            })
    }, [endpoint, body, dataPoint])

    return { data }
}

但我收到一些抱怨数据类型的 TS 错误。是否可以将类型作为参数传递，因为每个调用钩子的组件可能不同？或者解决这个问题的最佳方法是什么？

4

2 回答 2

0

是的，您可以使用泛型类型，这是一个示例。泛型函数的类型和非泛型函数的类型一样，类型参数在前，与函数声明类似，在不同组件中调用钩子时需要指定类型，类型会以这种方式推断。

function identity<Type>(arg: Type): Type {
  return arg;
}
 
let myIdentity: <Type>(arg: Type) => Type = identity;

您可以参考此链接了解更多信息。

于 2022-01-12T12:02:45.403 回答
0

在这种情况下，您可以使用泛型。你可以这样做：

export const useCustomQuery = <T,>({ endpoint, body, dataPoint }: args) => {
    const [data, setData] = useState<T>()
    ...
}

这样，当您调用 hook 时，您将给出一个类型 T useCustomQuery，它参数化了 的类型data，如下所示：

useCustomQuery<MyType>({...})
于 2022-01-12T12:06:16.860 回答