에러 개요

React component를 렌더링할 때, 데이터를 화면에 표시하려면 표시하려는 데이터 타입에 맞는 데이터를 넣어주어야 한다. 컴포넌트로 전달된 데이터와 표시하려는 데이터의 타입이 일치하지 않으면 다음과 같은 에러가 발생한다.

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

에러의 원인

source data인 Followings가 데이터타입이 array인데, 각 요소(여기서는 item, 데이터 타입은 Object)객체를 그대로 렌더링 하려고 했기 때문에 에러가 발생하였다.
즉, Object데이터를 그대로 렌더링 하려고 했기 때문에 에러가 발생한 것이다.

      <List
        dataSource={me.Followings}
        renderItem={item => {
          return (
            <List.Item>
              <Card actions={[<StopOutlined key='stop' />]}>
                <Card.Meta description={item} /> // <= 에러의 원인
              </Card>
            </List.Item>
          );
        }}
      />

solution

Followings array의 각 요소의 특정 attribute(여기서는 item.id, 데이터 타입은 Number)를 가져오는 것으로 수정하여 에러를 해결하였다

      <List
        dataSource={me.Followings}
        renderItem={item => {
          return (
            <List.Item>
              <Card actions={[<StopOutlined key='stop' />]}>
                <Card.Meta description={item.id} /> // <= id 값을 가져오는 것으로 해결
              </Card>
            </List.Item>
          );
        }}
      />

느낀 점

React component에 렌더링하여 표시할 데이터가 String, Number 등의 원시타입 데이터인 지 확인하여 코드를 작성해야겠다는 점을 느꼈다.