Question

我有一个关于使用 typescript 和 Axios 实现 useFetch hook 的问题。

这是我找到的一些 useFetch 钩子示例。但它是一个 javascript 实现。我只是给了那里任何回应和错误。

https://codesandbox.io/s/react-fetch-hook-gtiec?from-embed=&file=/src/components/App.js

这里是我的 useFetch hook .ts 文件。

import { useState, useEffect } from 'react'

export const useFetch = ({
    api,
    method,
    url,
    data = null,
    config = null,
}: any) => {
    const [response, setResponse] = useState(null)
    const [error, setError] = useState('')
    const [isLoading, setIsLoading] = useState(true)

    useEffect(() => {
        const fetchData = async () => {
            api[method](url, JSON.parse(config), JSON.parse(data))
                .then((res : any) => {
                    setResponse(res.data)
                })
                .catch((err : any) => {
                    setError(err)
                })
                .finally(() => {
                    setIsLoading(false)
                })
        }

        fetchData()
    }, [api, method, url, data, config])

    return { response, error, isLoading }
}

这是我通过 useFetch 发出获取请求的组件。

  const { response, isLoading, error } = useFetch({
        api: BaseURL,
        method: 'get',
        url: 'some',
    })

一切正常，请求有效。但是当我尝试将响应中的一些字符串值传递给我的某个子组件（子组件等待字符串值）时。

这是我在其中发出获取请求的组件中的子组件。

return (
    <Title>{response && response.id}</Title>
)

这里是标题组件

type Props = {
    children: string
}
export const Title: FC<Props> = ({ children }) => {
    return <h4>{children}</h4>
}

我收到此错误：

Type 'null' is not assignable to type 'string | (string & {}) | (string & ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)>) | (string & ReactNodeArray) | (string & ReactPortal)'.ts(2322)
Object is possibly 'null'.ts(2531)

这是我如何以打字稿方式实现这个钩子的第一个问题。

这里使用 fetch API。我如何在这里使用 Axios？

Answer 1

我认为您目前有两个问题需要解决如下：

在您的自定义挂钩中，您使用状态 const [response, setResponse] = useState(null)，它告诉 response 始终 null，这可能会导致您在此处查看 {response && response.id} 时出现问题。所以我建议你在通用类型中填写响应类型：

export const useFetch = <R extends any = any>({
  api,
  method,
  url,
  data = null,
  config = null,
}: any) => {
  const [response, setResponse] = useState<R | null>(null); // set `R` as returned type
  // ...
}

然后在使用自定义钩子的地方指定响应：

const { response, isLoading, error } = useFetch<{ id: string }>({
  // ...
});

另一件需要细化的事情是 children 类型应该是 React.ReactNode

type Props = {
    children: React.ReactNode
}

带有打字稿和 axios 的 useFetch 钩子

1 个答案: