对象作为 React.memo 的 React 子项无效答案

【问题标题】：Objects are not valid as a React child with React.memo对象作为 React.memo 的 React 子项无效
【发布时间】：2020-10-19 18:47:15
【问题描述】：

我收到以下错误

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>
 )

为什么会发生这种情况？我能做些什么来阻止它？

【问题讨论】：

标签： javascript reactjs react-memo

【解决方案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} />

【讨论】：