不可分配给 [React] 类型的参数

Question

I have problem in react I wrote enum type

enum.ts

export enum DivingType {
  FreeDiving = "FreeDiving",
  ScubaDiving = "ScubaDiving",
}

and my home screen has graphql hooks

home.tsx

import { DivingType } from "..."

export const Home = () => {
  const [divingType, setDivingType] = useState<DivingType>(DivingType.FreeDiving)
  const [pageNumber, setPageNumber] = useState(1)

  useMatchingList(divingType, pageNumber)
  
  // --------------------[ Return ]--------------------
  return ...

useMatchingList.tsx

interface IUseMatchingListProps {
  divingType: DivingType
  pageNumber: number
}
export const useMatchingList: React.FC<IUseMatchingListProps> = ({
  divingType,
 ,
}) => {...}

and I have

Argument of type 'import("...").DivingType' is not assignable to parameter of type 'PropsWithChildren<IUseMatchingListProps>'

useMatchingList(divingType, pageNumber)
       |            ^

what is the matter ? please help me !

Answer 1

The FC in React.FC means "Functional Component". And a hook is not a component. A custom hook is just a function that calls other hooks. So it takes arguments just like any function would.

That means your hooks should look more like this:

export const useMatchingList = (divingType: DivingType, pageNumber: number) => {
  // my hook implementation
}

Working typesafe example