Nextjs：属性"data"在类型"Promise<AxiosResponse<GetAllHolidaysData>>"上不存在

Question

我正在做一个nextjs项目，这是一个日历。

当国家和日历年变化应该改变和我使用一个假期API。API url包含国家和年份参数(https://localhost:5001//holiday?&country=${country}&year=${year})。所以我需要传递国家和年份，

在Holiday.tsx中，我使用下拉菜单选择国家和年份。当dropwon值改变时，API调用也必须改变。

所以我调用APi函数到一个useEffect monthChangeHandler和yearChangeHnadler。

API.ts

import axios from "axios";
import { GetAllHolidaysData } from "../interfaces/GetAllHolidaysData";
process.env.NODE_TLS_REJECT_UNAUTHORIZED;
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}`
);
}; // ok

Holiday.tsx

const Holidays: NextPage= () => {
const [selectedYear, setselectedYear] = useState(currentYear);
const [selectedCountry, setselectedCountry] = useState(countries[169]);

useEffect(() => {
const countryCode = Object.entries(selectedCountry)[0].map((i) => i)[1];
const year = selectedYear.map((item) => item.value)[0];
const {data} = GetAllHolidays(String(countryCode), year);   // I got error in this line
const holidays = data;
}, []);
const countryChangeHanlder = (e) => {
GetAllHolidays(e.value, year);
setselectedCountry(e);
};
const yearChangeHanlder = (e) => {
const countryCode = Object.entries(selectedCountry)[0].map((i) => i)[1];  
GetAllHolidays(String(countryCode), e.value);
setselectedYear(e);

};
}

当dropwon值改变时，API调用必须改变。我的代码有什么问题?

Answer 1

Axios。get返回一个Promise。Promise里面没有data属性

所以，你应该使用then/await来接收promise被解析后的结果。