为什么当我使用 avatar antd 时反应会报错？

Question

I need your help. I didnt know how to fix this error and I dont understand why get me this error:

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

and my page, Error there when I use function <UserAvatar />

import {Auth} from '../../context'
import config from '../../config'
import {Avatar} from 'antd'
import { UserOutlined } from '@ant-design/icons'
import { useConversation } from '../../conversation'

function UserAvatar(){
    return <div className="photo_section">
        <Avatar icon={UserOutlined} />
    </div>
}

export default function Conversations(){
    
    const {conversations,setConversationNumber,conversationNumber} = useConversation()
    return (
        <>
            {
                conversations.length === 0 ? <div> You dont have any chat! </div>:
                conversations.map( (i)=>(
                    <div 
                        key={i._id} 
                        
                        onClick = { ()=>{ 
                                setConversationNumber(i._id)
                            }
                        }
                        
                        className={"message_item " + (i._id === conversationNumber ? " _color ": "") }
                        
                    >
                        <UserAvatar />
                        
                        
                        <div className="message_section">
                            <div className="message_name">
                                <h6 className="_chat_user_name" > {i.name} </h6>
                            </div>
                            <div className="message_text">
                                <div className="text_mes">
                                    Hello how are you?
                                </div>
                                <div className="message_time">
                                    10s
                                </div>
                            </div> 

                        </div>

                    </div>))}  </>
    )
}

Answer 1

If you check the Avatar API you'll see that the icon prop is of type ReactNode . This means you need to pass the component as JSX, versus as a class or function component reference.

function UserAvatar() {
  return <div className="photo_section">
      <Avatar icon={<UserOutlined />} />
  </div>
}