Next.js调用Axios接口提示Promise不存在data属性该如何解决

现存问题 #

• 异步处理错误：GetAllHolidays 返回的是 Promise<AxiosResponse> 类型，不能同步解构 data，必须通过 async/await 或 .then 处理异步返回结果，这也是你遇到TS报错的直接原因。
• useEffect依赖缺失：当前useEffect依赖数组为空，只会在组件首次挂载时执行一次，后续国家、年份变更不会触发重新执行，无法自动更新数据。
• 逻辑冗余且存在变量错误：你在两个变更处理函数中重复调用接口，且countryChangeHanlder中使用的year变量未定义，同时没有声明存储节假日数据的state，拿到接口返回值后也无法驱动视图更新。
• 细节错误：API请求路径中query参数前多写了多余的&符号；process.env.NODE_TLS_REJECT_UNAUTHORIZED 只声明未赋值，开发环境如果用自签HTTPS证书需要设为'0'才能跳过证书校验。

修复实现 #

第一步：修正API.ts代码 #

import axios from "axios";
import { GetAllHolidaysData } from "../interfaces/GetAllHolidaysData";

// 开发环境跳过HTTPS证书校验
if (process.env.NODE_ENV === 'development') {
  process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0';
}
const http = axios.create({ baseURL: process.env.NEXT_PUBLIC_API });

export const GetAllHolidays = (country: string, year: number) => {
  console.log(country, year);
  // 去掉多余的&前缀
  return http.get<GetAllHolidaysData>(
    `/holiday?country=${country}&year=${year}`
  );
};

第二步：修正Holiday.tsx代码 #

统一把请求逻辑放在useEffect中，依赖国家、年份两个状态，只要状态变更自动触发请求，变更处理函数只负责更新对应状态即可：

import { useState, useEffect } from 'react';
import type { NextPage } from 'next';
import { GetAllHolidays } from './API'; // 调整为你实际的导入路径
// 假设你已有countries、currentYear的定义，这里保留你的原有变量

const Holidays: NextPage= () => {
  const [selectedYear, setselectedYear] = useState(currentYear);
  const [selectedCountry, setselectedCountry] = useState(countries[169]);
  // 新增存储节假日数据的state
  const [holidays, setHolidays] = useState<GetAllHolidaysData | null>(null);

  // 统一请求逻辑，依赖selectedCountry、selectedYear，变更自动触发
  useEffect(() => {
    const fetchHolidays = async () => {
      const countryCode = Object.entries(selectedCountry)[0][1] as string;
      const year = selectedYear[0].value as number;
      try {
        const { data } = await GetAllHolidays(countryCode, year);
        setHolidays(data);
      } catch (err) {
        console.error('获取节假日数据失败', err);
      }
    };
    fetchHolidays();
  }, [selectedCountry, selectedYear]); // 加入依赖，变更自动触发请求

  const countryChangeHanlder = (e) => {
    setselectedCountry(e);
  };
  const yearChangeHanlder = (e) => {
    setselectedYear(e);
  };

  // 后续渲染逻辑可以直接用holidays状态
}

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