TypeScript and Custom React Hook Api Service

Question

我正在尝试创建一个API服务来获取所有组件中的数据。 我被打字稿困住了(我不太擅长它(

我创建了一个自定义钩子：

useApiService.tsx

import React from 'react'
import axios from 'axios'
const useApiService = (url: string) => {
const baseUrl = 'http://localhost:8009'
const [response, setResponse] = React.useState(null)
const [error, setError] = React.useState(null)
React.useEffect(() => {
const fetchData = async (): Promise<void> => {
try {
const res = await axios(`${baseUrl}${url}`)
setResponse(res.data)
} catch (error) {
setError(error)
}
}
fetchData()
}, [url])
return { response, error }
}
export default useApiService

然后在我的组件中使用此钩子，如下所示：

标题.tsx

import React from 'react'
import { Button, Form, FormControl, Navbar, NavItem } from 'react-bootstrap'
import Nav from 'react-bootstrap/Nav'
import { Link } from '@reach/router'
import useApiService from '../services/useApiService'
interface NavigationData {
title: string
ID: string
post_excerpt: string
}
interface SiteData {
name: string
}
const Header: React.FC = () => {
const menuQuery: Array<NavigationData> = useApiService('/wp-json/wp-utils/menus')
const siteNameQuery: SiteData = useApiService('/wp-json')
const data = menuQuery.response
const siteName = siteNameQuery.response
if (data && siteName)
return (
<Navbar bg="primary" expand="lg" className="navbar-dark mb-4">
<Link to={'/'}>
<Navbar.Brand>{siteName.name}</Navbar.Brand>
</Link>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
{data.map((item: NavigationData) => (
<NavItem key={item.ID}>
<Link className="nav-link" to={item.post_excerpt}>
{item.title}
</Link>
</NavItem>
))}
</Nav>
<Form className={'my-2 my-lg-0'} inline>
<FormControl type="text" placeholder="Recherche" className="mr-sm-2" />
<Button variant="light" className="my-2 my-sm-0">
Search
</Button>
</Form>
</Navbar.Collapse>
</Navbar>
)
else return null
}
export default Header

但是我有打字稿错误Type '{ response: null; error: null; }' is missing the following properties from type 'NavigationData[]': length, pop, push, concat, and 28 more.

我想将数据接口或类型从我的组件注入到我的自定义钩子中，但我不知道这是否是执行此操作的好方法，以及如何正确执行此操作。

感谢您的建议

Answer 1

因为你像这样初始化状态

// TS will infer type for value of response as null
const [response, setResponse] = React.useState(null) 
// TS will infer type for value of error as null
const [error, setError] = React.useState(null)

并从自定义钩子useApiService返回{ response, error }，TS 会将返回类型推断为{response: null; error: null}。

如果要创建useApiService作为更可重用的钩子，请考虑将其设置为泛型，这将采用类型参数 T，返回类型将{ response: T | null; error: Error | null }。例如

function useApiService<T>(url: string): { response: T | null; error: Error | null } {
const baseUrl = 'http://localhost:8009';
const [response, setResponse] = React.useState<T | null>(null);
const [error, setError] = React.useState<Error | null>(null);
React.useEffect(() => {
const fetchData = async (): Promise<void> => {
try {
const res = await axios(`${baseUrl}${url}`);
setResponse(res.data);
} catch (error) {
setError(error);
}
};
fetchData();
}, [url]);
return { response, error };
}

当你使用自定义钩子useApiService时，现在你只需要传递你想要的响应类型作为类型参数。

interface NavigationData {
title: string
ID: string
post_excerpt: string
}
interface SiteData {
name: string
}
const menuQuery = useApiService<NavigationData[]>('/wp-json/wp-utils/menus')
// Keep in mind that the return type of menuQuery is 
// { response: NavigationData[] | null; error: Error | null}
// you can destructure the response and error from the returned value 
// const { response, error } = useApiService<NavigationData[]>('/wp-json/wp-utils/menus');

// same applies to siteNameQuery you can either destructure the response and error
// or use siteNameQuery.response and siteNameQuery.error
const siteNameQuery = useApiService<SiteData>('/wp-json')

P.S.-您需要为响应类型创建与API响应匹配的接口，否则您将丢失类型信息。