[英]Objects are not valid as a React child with React.memo
I am receiving the following errors我收到以下错误
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.
They happen when I change this component当我更改此组件时会发生它们
const Tab = () => onLastTab
? <AccountTab data={data.account} />
: <InfoTab data={data.info} />
To be this component, the only difference is the use of React.memo要做这个组件,唯一的区别就是使用 React.memo
const Tab = () => onLastTab
? React.memo(<TabOne data={data.one} />)
: React.memo(<TabTwo data={data.two} />)
Those components wrapped in React.memo are definately just functional components that look like React.memo 中包装的那些组件肯定只是看起来像的功能组件
const TabOne = ({data}) => (
<div>
<div className='d-flex '>
...
</div>
</div>
)
Why would this be happening?为什么会发生这种情况? What can I do to stop it?
我能做些什么来阻止它?
As the error message explains, you need to pass component to the React.memo(), not an object.正如错误消息所解释的,您需要将组件传递给 React.memo(),而不是一个对象。
TabOne
is obviously a component name but you already created an object of that component and passed it through the React.memo(). TabOne
显然是一个组件名称,但您已经创建了该组件的对象并将其传递给 React.memo()。 You need fix your code as follows:您需要按如下方式修复代码:
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} />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.