我已经遵循了许多关于如何设置自己的自定义通用的教程useFetch
钩。
我想出的方法效果很好,但它违反了一些 Hook 规则。
大多数情况下,它不使用“正确”的依赖项集。
通用挂钩接受 url、选项和依赖项。
设置依赖关系,因为所有三个都会创建无限刷新循环,即使依赖关系没有改变.
// Infinite useEffect loop - happy dependencies
const UseRequest: <T>(url: string, options?: Partial<UseRequestOptions> | undefined, dependencies?: any[]) => UseRequestResponse<T>
= <T>(url: string, options: Partial<UseRequestOptions> | undefined = undefined, dependencies: any[] = []): UseRequestResponse<T> => {
const [data, setData] = useState<T | undefined>();
const [loading, setLoading] = useState<boolean>(false);
const [error, setError] = useState<UseRequestError | undefined>();
useEffect(() => {
let ignore = false;
(async () => {
try {
setLoading(true);
const response = await (options ? fetch(url) : fetch(url, options))
.then(res => res.json() as Promise<T>);
if (!ignore) setData(response);
} catch (err) {
setError(err);
} finally {
setLoading(false);
}
})();
return (() => { ignore = true; });
}, [url, options, dependencies]);
return { data, loading, error };
}
我发现,如果我省略依赖项中的选项(这是有道理的,因为我们不希望这个深层对象以我们应该监视的方式发生变化)并传播传入的依赖项,它就会按预期工作。
当然,这两个变化都打破了“Hooks 规则”。
// Working - mad dependencies
const UseRequest: <T>(url: string, options?: Partial<UseRequestOptions> | undefined, dependencies?: any[]) => UseRequestResponse<T>
= <T>(url: string, options: Partial<UseRequestOptions> | undefined = undefined, dependencies: any[] = []): UseRequestResponse<T> => {
const [data, setData] = useState<T | undefined>();
const [loading, setLoading] = useState<boolean>(false);
const [error, setError] = useState<UseRequestError | undefined>();
useEffect(() => {
let ignore = false;
(async () => {
try {
setLoading(true);
const response = await (options ? fetch(url) : fetch(url, options))
.then(res => res.json() as Promise<T>);
if (!ignore) setData(response);
} catch (err) {
setError(err);
} finally {
setLoading(false);
}
})();
return (() => { ignore = true; });
}, [url, ...dependencies]);
return { data, loading, error };
}
...然后我就用它
export const GetStuff: () => UseRequestResponse<Stuff[]> & { refresh: () => void } = () => {
const { appToken } = GetAppToken();
const [refreshIndex, setRefreshIndex] = useState(0);
return {
...UseRequest<Stuff[]>('https://my-domain.api/v1/stuff', {
method: 'GET',
headers: {
'Authorization': `Bearer ${appToken}`
}
}, [appToken, refreshIndex]),
refresh: () => setRefreshIndex(refreshIndex + 1),
};
};
请注意,工作状态和损坏状态之间的唯一变化是:
}, [url, options, dependencies]);
...to:
}, [url, ...dependencies]);
那么,我怎样才能重写它以遵循 Hooks 规则而不陷入无限刷新循环呢?
这是完整的代码useRequest
使用定义的接口:
import React, { useState, useEffect } from 'react';
const UseRequest: <T>(url: string, options?: Partial<UseRequestOptions> | undefined, dependencies?: any[]) => UseRequestResponse<T>
= <T>(url: string, options: Partial<UseRequestOptions> | undefined = undefined, dependencies: any[] = []): UseRequestResponse<T> => {
const [data, setData] = useState<T | undefined>();
const [loading, setLoading] = useState<boolean>(false);
const [error, setError] = useState<UseRequestError | undefined>();
useEffect(() => {
let ignore = false;
(async () => {
try {
setLoading(true);
const response = await (options ? fetch(url) : fetch(url, options))
.then(res => res.json() as Promise<T>);
if (!ignore) setData(response);
} catch (err) {
setError(err);
} finally {
setLoading(false);
}
})();
return (() => { ignore = true; });
}, [url, ...dependencies]);
return { data, loading, error };
}
export default UseRequest;
export interface UseRequestOptions {
method: string;
mode: 'cors', // no-cors, *cors, same-origin
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'same-origin', // include, *same-origin, omit
headers: {
[prop: string]: string;
},
redirect: string, // manual, *follow, error
referrerPolicy: string, // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
body: string | { [prop: string]: any };
[prop: string]: any;
};
export interface UseRequestError {
message: string;
error: any;
code: string | number;
[prop: string]: any;
}
export interface UseRequestResponse<T> {
data: T | undefined;
loading: boolean;
error: Partial<UseRequestError> | undefined;
}