TypeScript中Axios Get请求数据无法赋值给SetStateAction参数问题

你遇到的问题根源是axios.get的泛型参数使用错误。axios.get的泛型是用来指定响应体res.data的类型，而不是整个Promise或AxiosResponse的类型。你之前把泛型设为Promise<AxiosResponse>，导致TypeScript推断res.data的类型和useState声明的InterfaceNameHere不兼容，从而抛出类型错误。

修正步骤： #

• 直接将axios.get的泛型参数设为你的目标类型InterfaceNameHere，axios会自动将res.data的类型推断为这个接口。
• 不需要手动包裹Promise或AxiosResponse，axios内部已经处理了这些类型。

修正后的完整代码： #

// interface File
export default interface InterfaceNameHere {
  author?: string;
  date?: number;
  title?: string;
  __v?: number;
  _id?: string;
  dataArray?: Array<IAnotherInterface>;
}

// component
const [returnedSearch, setReturnedSearch] = useState<InterfaceNameHere>({});

useEffect(() => {
  axios
    .get<InterfaceNameHere>(`URLGOESHERE`)
    .then((res) => {
      setReturnedSearch(res.data);
    })
    .catch((err) => {
      // error handling here
    });
}, []);

额外说明： #

如果你的接口返回的是InterfaceNameHere的数组，只需要把泛型改成InterfaceNameHere[]即可，同时对应的useState也要调整为useState<InterfaceNameHere[]>([])，保持类型一致。

内容的提问来源于stack exchange，提问作者SosijElizabeth