[Error] Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

Jaewoo Gwak·2021년 11월 18일
0

에러처리

목록 보기
2/2
post-thumbnail

2022-01-15 수정

개발하면서 이 에러를 정말 많이 봤다.

예를 들어 다음과 같은 people 객체가 존재한다.

 const people = {
    age : 23,
    job : 'developer',
    fav : 'bburinkle'
  }

컴포넌트에서 people을 그냥 return 해버리면 에러가 발생한다.

people 객체 안에 프로퍼티들이 존재하기 때문이다.

그래서 객체 안에 프로퍼티가 존재하면 객체 이름(예시에서는 people)으로 리턴하면 안된다.

반드시 자식 객체 전부를 리턴할 필요는 없지만 객체 이름 자체로는 리턴하면 안된다.


이 에러 때문에 1시간 넘게 고민했다..


import React from 'react';
import Iss from './Iss';

class App extends React.Component {

  constructor() {
    super();
    this.state= {
      data : {
      
      }
    }
    this.run();
  }
  getData = async () => {
    const url = await fetch('http://api.open-notify.org/iss-now.json');
    const resp = await url.json();
    return resp;
  }

  run = async () => {
    const data = await this.getData();
    this.setState({ data : data});
  }
  render() {
    console.log(this.state.data);
    return (
      <div>
        <Iss data = {this.state.data}/>

      </div>
    )

  }
}

export default App;

ISS 국제우주정거장의 현재 위도 경도 및 타임스탬프 등 위치 데이터를 받아오는건데 자꾸 에러가 떴다.

일단 this.statedata 요 부분을 확실하게 작성해줬는데 해결이 되긴 했따.

 this.state= {
      data : {
        message : '',
        timestamp : '',
        iss_position : {
          latitude :0,
          longitude:0
        }
      }
    }

일단 임시방편으로 해결했지만 근본적인 원인을 알아야겠다!

profile
꾸준하게 나아가고 싶다

0개의 댓글