0

我正在开发一个作为日历的 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}`
  );
};

索引.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);
   
  };

}
4

1 回答 1

0

简短的回答：

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

解释：

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

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

更新：

你可以这样做：

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);
   
  };
}
于 2021-10-03T07:01:28.587 回答