React Error : Objects are not valid as a React child (found: object with keys {count}). If you meant to render a collection of children, use an array instead.

🍒Jooooooo_eun🍒·2021년 12월 13일
0

ReactError

목록 보기
4/5
post-thumbnail

이런 에러가 났다

Objects are not valid as a React child (found: object with keys {count}). If you meant to render a collection of children, use an array instead.

어이없게도 useState 사용값을 바꾸다가 실수로 오브젝트 타입 그대로 상태값을 저장해놓고 있었다!
useState 를 사용할때 객체 유형을 꼭 신경써서 해줘야 할 것 같다!

import React from "react";

export default function Count() {
  const [count, setCount] = React.useState({ count: 0 }); //이곳에서 에러발생

  return (
    <div>
      <p>{count}</p> <button onClick={click}>숫자 올리기</button>
    </div>
  );

  function click() {
    setCount(count + 1);
  }
}

👉 이런경우 return 에선 {count}가 아닌 {count.count}로 설정해주어 인자 값 내부를 선택해 주어야 한다!
기존 오브젝트 타입이 아닌 객체로 선택하려면

import React from "react";

export default function Example5() {
  const [count, setCount] = React.useState(0); //이렇게 설정해주어야 한다.
  
  return (
    <div>
      <p>{count}</p> <button onClick={click}>숫자 올리기</button>
    </div>
  );

  function click() {
    setCount(count + 1);
  }
}
profile
먹은만큼 성장하고 싶은 초보 개발자의 끄적끄적 개발메모장 ✍

0개의 댓글