useState中具有泛型类型的Typescript函数，允许为null

Question

我在React:中有一个类似的钩子函数

export function useFetch<T = unknown|null>(url: string) : [T, boolean] {
const accessToken = useAccessToken();
const [data, setData] = useState<T>(null);  // TS ERROR
const [isLoading, setIsLoading] = useState<boolean>(true);

useEffect(() => {
if (accessToken) {
fetch(`/api/v1${url}`, {
headers: {
Authorization: `Bearer ${accessToken}`,
},
})
.then((res) => res.json())
.then(data => {
setData(data);
setIsLoading(false);
});
}
}, [accessToken, url]);
return [data, isLoading];
}

但我得到了这个错误：Argument of type 'null' is not assignable to parameter of type 'T | (() => T)'.ts(2345)

如何将T定义为可为null？

Answer 1

T = unknown | null是泛型类型参数的默认值，这并不意味着提供的T将允许null。相反，您可以指定除了T:之外，还允许使用null作为状态

export function useFetch<T>(url: string): [T | null, boolean] {
const accessToken = useAccessToken();
const [data, setData] = useState<T | null>(null);
const [isLoading, setIsLoading] = useState<boolean>(true);
// ...
return [data, isLoading];
}

游乐场