2024. 03. 21. TIL

 

'Promise<RecipeType[] | null>' 형식은 '(searchTerm: string) => void' 형식에 할당할 수 없습니다. 
'Promise<RecipeType[] | null>' 형식에서 '(searchTerm: string): void' 시그니처에 대한 일치하는 항목을 제공하지 않습니다.ts(2322)

SearchBox 컴포넌트를 import하여 사용하려고 했는데 타입에러가 떴다.

 

 

SearchBox에 들어가는 프롭스 타입은 return void  타입으로 아무것도 반환하지 않아야 한다.

interface SearchBoxProps { onSearch: (searchTerm: string) => void; }

 

내가 searchBox에 넣으려는 함수인 filterDatta는 < RecipeType[] | null>을 return하고 있다.

export const filterData = async (searchKeyword: string | null) => {
const { data: cookrcp, error }: PostgrestResponse<RecipeType> = await supabase 
.from("cookrcp") .select("*") 
.like( "RCP_NAME", `${searchKeyword === "All" ? `%` : `%${searchKeyword}%`}` ); 

if (error) {
console.log("레시피를 불러오는 중 오류가 발생했습니다.", error); 
} 

return cookrcp; 

};

 

<SearchBox onSearch={filterData("김치")} />

따라서 이부분에서 filterData의 결과값을 전달하려고 했기 때문에 타입에러가 난다.

 

<SearchBox onSearch={(searchKeyword) => filterData(searchKeyword)} />

해결방법은 서치박스에 함수 실행 결과값(return값)을 전달하는게 아니라 함수 자체를 전달하면 타입에러를 해결할 수 있다.