当下拉值更改nextjs时如何更改api调用

Question

我正在开发一个 nextjs 项目，它是一个日历。当国家和年份更改日历应该更改并且我使用假期 API。 API url 包含国家和年份参数（https://localhost:5001//holiday?&country=${country}&year=${year}）。所以我需要通过国家和年份，在Holiday.tsx 我使用下拉选择国家和年份。

我在获取数据方面遇到了困难。如何将这些选定的国家和年份值传递给index.tsx。我不使用动态路径。我只有 index.ts。

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}`
  );
}; 

index.tsx

const Home: NextPage<{ holidays: GetAllHolidaysData }> = ({ holidays }) => {
  return (
    <>
          <Holidays holidays={holidays}/>
    </>
  );
};

export const getServerSideProps: GetServerSideProps = async () => {
  // let country = "ro";
  // let year = "2021";
  let holidays: GetAllHolidaysData;

  try {
    const { data } = await GetAllHolidays(country, year);    // I struggled at this line how to bind country and year those are selected in Holiday.tsx file using a dropdwon
    holidays = data;

  } catch (error) {
    console.log(error);
  }

  return {
    props: {
      holidays,
    },
  };
};

export default Home;

Holiday.tsx - 这里的国家和年份变化

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

  const countryChangeHanlder = (e) => {
    GetAllHolidays(e.value, year);
    // setCountry(e.label);
    setselectedCountry(e);
    console.log(selectedCountry);
  };
  const yearChangeHanlder = (e) => {
    const countryCode = Object.entries(selectedCountry)[0].map((i) => i)[1];  
    GetAllHolidays(String(countryCode), e.value);
    setYear(e.value);
    setselectedYear(e);
   
  };

}

Answer 1

简答：

您无法在getServerSideProps 中使用下拉列表中的选项执行此操作，因为下拉列表位于您要使用此getServerSideProps 返回的页面上。相反，您应该在组件本身中执行此操作 - const Home: NextPage 或 Holiday.tsx。

解释：

getServerSideProps 在页面返回给客户端之前在服务器上调用。您可以查看here。

您的下拉选择在页面返回（并呈现）之后可用，因此您可以访问这些值，因此您可以使用选择发出请求

更新：

你可以这样做：

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

  useEffect(() => {
    (async () => {
      try {
         const { data } = await GetAllHolidays(country, selectedYear);
         // use your data from here

      } catch (error) {
         console.log(error);
       })()
  }, [selectedYear])

  const countryChangeHanlder = (e) => {
    GetAllHolidays(e.value, year);
    // setCountry(e.label);
    setselectedCountry(e);
    console.log(selectedCountry);
  };
  const yearChangeHanlder = (e) => {
    const countryCode = Object.entries(selectedCountry)[0].map((i) => i)[1];  
    GetAllHolidays(String(countryCode), e.value);
    setYear(e.value);
    setselectedYear(e);
   
  };
}