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

Question

我在 React 中有一个这样的钩子(Hook)函数:

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];
}

但我收到此错误: “null”类型的参数不可分配给“T | 类型”的参数(() => T)'.ts(2345)

如何将 T 定义为可为空？

Answer 1

T = 未知 | null 是 default for generic type parameter ，这并不意味着提供的 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];
}

Playground