Объекты недопустимы как дочерние объекты React с React.memo

Question

Я получаю следующие ошибки

Warning: memo: The first argument must be a component. Instead received: object

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

Они случаются, когда я меняю этот компонент

const Tab = () => onLastTab 
    ? <AccountTab data={data.account} />
    : <InfoTab data={data.info} />

Чтобы быть этим компонентом, единственное отличие заключается в использовании React.memo.

const Tab = () => onLastTab 
    ? React.memo(<TabOne data={data.one} />)
    : React.memo(<TabTwo data={data.two} />)

Эти компоненты, заключенные в React.memo, определенно являются просто функциональными компонентами, которые выглядят как

const TabOne = ({data}) => (
    <div>
        <div className='d-flex '>
         ...
        </div>
     </div>
 )

---

Почему это могло происходить? Что я могу сделать, чтобы это остановить?

Answer 1

Как объясняется в сообщении об ошибке, в React.memo() нужно передать компонент, а не объект. TabOneочевидно, имя компонента, но вы уже создали объект этого компонента и передали его через React.memo(). Вам нужно исправить свой код следующим образом:

const TabOne = ({data}) => (
    <div>
        <div className='d-flex '>
         ...
        </div>
     </div>
 )
export default React.memo(TabOne)

const Tab = () => onLastTab 
    ? <TabOne data={data.one} />
    : <TabTwo data={data.two} />