我如何使我的axios函数在其他React/Typescript组件可重用?

Question

我正在复制/粘贴相同的代码，以便在多个组件中发出axios请求，如下所示:

React.useEffect(() => {
axios
.get<IDownloads[]>(`${process.env.PUBLIC_URL}/api/downloads`, {
headers: {
'Content-Type': 'application/json',
},
timeout: 5000,
})
.then((response) => {
setFaqs(response.data);
})
.catch((ex) => {
const err = axios.isCancel(ex)
? 'Request cancelled'
: ex.code === 'ECONNABORTED'
? 'A timeout has occurred'
: ex.response.status === 404
? 'Resource not found'
: 'An unexpected error has occurred';
setError(err);
});
}, []);

可以工作，但不遵循DRY。我希望能够在我的应用程序的其他领域重用此代码，但需要能够改变。get(${process.env.PUBLIC_URL}/api/downloads在其他领域的工作。像。get(${process.env.PUBLIC_URL}/api/somethingElse)我做了一个新的组件，试图做到这一点

export default function useApiRequest<T>(url: string): { response: T | null; error: Error | null} {
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(`${process.env.PUBLIC_URL}${url}`);
setResponse(res.data);
} catch (error) {
setError(error);
}
};
fetchData();
}, [url]);

return { response, error };
};

并在此组件中像这样使用:

interface IDownloads {
db_id: number;
file_description: string;
file_name: string;
developer_name: string;
date_uploaded: string;
file_url: string;
}
const defaultProps: IDownloads[] = [];
const DownloadCodeSamplesPage: React.FC = () => {
const downloadQuery = useApiRequest<IDownloads[]>('/api/download');

const [downloads, setDownloads]: [IDownloads[], (posts: IDownloads[]) => void] =
React.useState(defaultProps);

在我的返回，我映射通过下载如下

downloads.map((download) => (
<tr key={download.db_id}>
<td>{download.file_description}</td>
<td>{download.file_name}</td>
<td>{download.developer_name}</td>
<td>{download.date_uploaded}</td>

当我运行程序时，我没有从api调用接收任何数据。我做错了什么?

Answer 1

状态重复

你的钩子看起来很棒。问题在于如何在组件中使用它。downloads不需要本地状态——这就是钩的意义所在!所以杀死React.useState和任何你调用setDownloads的地方。

你可以从钩子中访问downloads，如果它是null，则将其替换为空数组。

const downloads = downloadQuery.response ?? [];

const DownloadCodeSamplesPage: React.FC = () => {
const downloadQuery = useApiRequest<IDownloads[]>("/api/download");
const downloads = downloadQuery.response ?? [];
return (
<table>
<tbody>
{downloads.map((download) => (
<tr key={download.db_id}>
<td>{download.file_description}</td>
<td>{download.file_name}</td>
<td>{download.developer_name}</td>
<td>{download.date_uploaded}</td>
</tr>
))}
</tbody>
</table>
);
};

你可以考虑为你的网站创建一个axios实例，它预先配置了baseUrl和任何其他设置，并在你的应用程序的任何地方使用它。