reactjs - 如何解决 React 应用程序中 axios 响应的 TypeScript 错误

Question

我得到了以下 React 函数(使用 React Hooks 的 alpha)，它有一个 TypeScript 错误(认为它仍然有效)。错误指向 axios Promise 以 .then(a=>{setData(a)) 完成的代码行...我认为这是对 a 的提示。

TS2345: Argument of type 'void | AxiosResponse' is not assignable to parameter of type 'SetStateAction'.   Type 'void' is not assignable to type 'SetStateAction'.

这里是代码的链接:https://codesandbox.io/s/7zyx4vv6k6

此文件中还需要输入更多内容吗？我是 TypeScript 的新手，我很惊讶我只需要做很少的事情就可以让它只提示这一件事。在codesandbox中，它没有向我显示我可以看到的tpyescript错误。有没有办法让它像在我的 webstorm IDE 中一样显示在那里？在codesandbox中，我想要使类型正确的行是32，即使它没有在codesandbox中将其显示为错误

import { useState, useEffect } from "react";
import axios from "axios";

const useAxiosFetch = (url: string, timeout: number) => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let unmounted = false;
    let source = axios.CancelToken.source();
    axios
      .get(url, {
        cancelToken: source.token,
        timeout: timeout,
      })
      .catch(function(e) {
        if (!unmounted) {
          setError(true);
          setErrorMessage(e.message);
          setLoading(false);
          if (axios.isCancel(e)) {
            console.log(`request cancelled:${e.message}`);
          } else {
            console.log("another error happened:" + e.message);
          }
        }
      })
      .then(a => {
        if (!unmounted) {
          setData(a);
          setLoading(false);
        }
      });
    return function() {
      unmounted = true;
      source.cancel("Cancelling in cleanup");
    };
  }, []);

  return { data, loading, error, errorMessage };
};

export default useAxiosFetch;

Answer 1

原因就在这一行:

const [data, setData] = useState(null)

由于没有为 useState 显式提供类型参数，TypeScript 会根据初始状态的类型推断 data 的类型。在本例中，初始状态为 null 并且 TypeScript 将此类型视为唯一可能的状态。

您知道状态要么为 null 要么为其他值 - 但 TypeScript 不知道。让我们使用类型参数来告诉它到底发生了什么。

const [data, setData] = useState<AxiosResponse | null | void>(null);

这消除了错误，但看起来很奇怪 - 为什么会有 void ？原因是您在 then 之前先 catch — 而且由于 catch 会产生副作用(返回 void ，换句话说)，传播到 catch 的类型是 void 或 AxiosResponse。让我们通过替换 then 和 catch 来解决这个问题。

最终解决方案:

import axios, { AxiosResponse } from "axios";
import { useEffect, useState } from "react";

const useAxiosFetch = (url: string, timeout: number) => {
  const [data, setData] = useState<AxiosResponse | null>(null);
  const [error, setError] = useState(false);
  const [errorMessage, setErrorMessage] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let unmounted = false;
    const source = axios.CancelToken.source();
    axios
      .get(url, {
        cancelToken: source.token,
        timeout,
      })
      .then(a => {
        if (!unmounted) {
          setData(a);
          setLoading(false);
        }
      })
      .catch(function(e) {
        if (!unmounted) {
          setError(true);
          setErrorMessage(e.message);
          setLoading(false);
          if (axios.isCancel(e)) {
            console.log(`request cancelled:${e.message}`);
          } else {
            console.log("another error happened:" + e.message);
          }
        }
      });

    return function() {
      unmounted = true;
      source.cancel("Cancelling in cleanup");
    };
  }, []);

  return { data, loading, error, errorMessage };
};

export default useAxiosFetch;