Javascript 对象作为React.memo的React子对象无效

我收到以下错误

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} />

const Tab=（）=>onLastTab
? 
: 

对于这个组件，唯一的区别是使用React.memo

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

const Tab=（）=>onLastTab
? 回应.备忘录()
：React.memo（）

那些封装在React.memo中的组件肯定只是看起来像

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

const TabOne=（{data}）=>(
...
)

---

---

为什么会发生这种情况？如何停止它？

正如错误消息所解释的，您需要将组件传递给React.memo（），而不是对象

TabOne

显然是一个组件名，但您已经创建了该组件的一个对象，并通过React.memo（）传递了它。 您需要按如下方式修复代码：

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

const TabOne=（{data}）=>(
...
)
导出默认的React.memo（TabOne）

const Tab=（）=>onLastTab
? 
: 

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