타입관련 에러: 함수 파라미터 순서

프로젝트를 진행하면서 생겼었던 문제 중 파라미터 순서 실수로 api 통신이 제대로 되지 않아 네트워크 탭을 보며 해결했던 것을 다음에 또 실수하지 않기 위해 기록해 두어야겠다는 생각이 들었다.✍

문제 발생🐞

카테고리 메뉴클릭시 이동하는 페이지에 필터를 설정할때 바뀌는 API요청 부분에서 에러가 발생해 통신이 되지않았고, 네트워크 탭 검토 -> API 요청 부분에서 값이 이상하게 들어가는것을 확인

문제 원인🔎

CategoryList 컴포넌트에서 이 함수를 호출할 때 파라미터를 잘못 전달하여 발생한 문제

apis 폴더안 categoryProducts.ts

export const fetchCategoryProducts = async (
  category: string | null,
  pageRef: number,
  age: string | null,
  gender: string | null,
  filter: string | null,
  searchWord: string | null,
) => {

ProductPage폴더안 CategoryList.tsx

  const productFetch = async () => {
    try {
      const response = await fetchCategoryProducts(
        filter,
        category,
        age,
        gender,
        searchWord,
        pageRef.current,
      );
      console.log('RESPONSE', response);
      setProducts((prevProducts) => [...(pageRef.current === 1 ? [] : prevProducts), ...response]);
      pageRef.current = pageRef.current + 1;
    } catch (error) {
      console.error(error);
    }
  };

문제 해결💡

파라미터를 올바른 순서로 전달

const response = await fetchCategoryProducts(
  category,
  pageRef.current,
  age,
  gender,
  filter,
  searchWord
);

이렇게 수정하고 나니 정상적으로 작동하였다.