setState is not a function

부모 컴포넌트의 boolean 상태값을(모달창 온오프)

자식 컴포넌트로 넘겨서 사용하던 도중 해당 오류를 접하게 되었다.

 

Uncaught TypeError: setState is not a function

 

해당 오류의 해결책으로는 2가지 해결책이 제시되지만

1. Arrow function 사용

2. thisBinding

 

나는 이미 arrow function을 사용하여 상위 스코프의 this를 그대로 활용하고 있기 때문에 해결책이 아니였다.

(thisBinding 과정 자체가 생략)

 

> 원인

/* 부모 컴포넌트 */
const [open, setOpen] = useState(false); // 모달창 on off

/* 자식 컴포넌트 props */
function ChildComponent(setOpen: React.Dispatch<React.SetStateAction<boolean>>) {
  return (
    <Button onClick={() => setOpen(false)}>
  );
};

 

> 해결

자식컴포넌트로 넘겨주는 props를 type alias 또는 interface로 선언해서 넘겨주면 오류가 해결된다!

/* 부모 컴포넌트 */
const [open, setOpen] = useState(false); // 모달창 on off

/* 자식 컴포넌트 props */
interface childProps {
  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
};

function ChildComponent({setOpen}: childProps) {
  return (
    <Button onClick={() => setOpen(false)}>
  );
};

 

타입스크립트로 props를 넘겨받는 자식컴포넌트에서 setState is not a function 오류가 뜬건데

 

interface나 type으로 한번 묶어주니 해결되었다..

 

좀더 공부해보는 것으로..!