Dispatch<SetStateAction<boolean>>

김듑듑·2022년 10월 18일
0

프론트엔드

목록 보기
19/24

https://velog.io/@rohkorea86/Type-error-Type-Dispatch-SetStateAction-is-not-assignable-to-type-void.-TS2322

상황

부모

const [isOpen, setIsOpen] = useState(false)

const handleModalOpen=()=>{
	setIsOpen((prev) => !prev);
}

<Delete isOpen={isOpen} handleModalOpen={handleModalOpen}

자식

interface IProps {
	isOpen: boolean;
    handleModalOpen: 여기서 문제임
}

const Delete=({isOpen, handleModalOpen}:IProps)=>{
	어쩌고
}

handleModalOpen을 MouseEventHandler로 보내니까 버튼을 통해 열고 닫는건 가능
이건 됨

<ModalCloseButton type='button' onClick={handleModalOpen}>
	<CloseIcon />
</ModalCloseButton>

근데 이건 안됨

const handleDelete =(e: React.MouseEvent<HTMLButtonElement>)=>{
  handleModalOpen(e)
}
<ModalCloseButton type='button' onClick={handleDelete}>
	<CloseIcon />
</ModalCloseButton>

그래서 handlemodalOpen을 ()=>void로 썼더니 이런 오류생김

'Dispatch<SetStateAction<boolean>>' 형식은 'MouseEventHandler<Element>' 형식에 할당할 수 없습니다.
  'value' 및 'event' 매개 변수의 형식이 호환되지 않습니다.
    'MouseEvent<Element, MouseEvent>' 형식은 'SetStateAction<boolean>' 형식에 할당할 수 없습니다.ts(2322)
AddProject.tsx(31, 3): 필요한 형식은 여기에서 'IntrinsicAttributes & IProps' 형식에 선언된 'handleModalOpen' 속성에서 가져옵니다.

그래서 (isOpen: boolean)=>void으로 바꿈
근데 생각해보면 ()이 맞아 내가 함수를 그렇게 적었으니까....

0개의 댓글