NextJS-错误：对象作为React子对象无效发现：具有键{items}的对象

如何解决NextJS-错误：对象作为React子对象无效发现：具有键{items}的对象

我正在尝试使用通过REST API连接到SocketIO服务器的NextJS编写聊天应用程序。我有3个组件，第一个是消息。使用“从”和“到”组件显示消息。将数据作为prop传递到Messages组件，From和To组件是相同的。我给了key={props.key}，仍然出现错误。

/ chat / [id] .js

import React,{useEffect} from 'react'
import cookie from 'js-cookie'
import io from 'socket.io-client'
let socket = io('http://localhost:3090')

import {withRouter} from 'next/router'

import Messages from '../../components/Messages'

class Chat extends React.Component {
constructor(query){
    super();

    // I wanna get query parameter.

    this.state = {
        Messages: [],loading: 0
    }

    socket.on('connect',function(){
        socket.emit('set',{uuid: cookie.get('uuid')})

        socket.emit('getpms',{uuid: cookie.get('uuid'),sender: /* and use it like that */ query.id})

        console.log('[Socket] Connected!')
    }.bind(this))
    
    socket.on('pm',function(message){
        socket.emit('getpms',{uuid: cookie.get('uuid')});
    }.bind(this))

    socket.on('getpms',function(data){
        this.setState({
            Messages: data.data,loading: 1
        });
    }.bind(this))
}

static getInitialProps({query}){
    return {query}
}

render(){
    if(this.state.loading){
        return(
            <Messages data={this.state.Messages} />
        )
    } else {
        return(<span>yükleniyor</span>)
    }
    }
}

export default withRouter(Chat)

components / Messages.js

import From from '../components/From'
import To from '../components/To'

import cookie from 'js-cookie'

export default class extends React.Component {
    constructor(props){
        super(props)
    }

    render(){
        const items = this.props.data.map((Message) => {
            if(Message.sender = cookie.get('uuid')){
                return(
                    <To key={Message.content} author={Message.author} message={Message.content} />
                )
            } else {
                return(
                    <From key={Message.content} author={Message.author} message={Message.content} />
                )
            }
        })

        return(
            {items}
        )
    }
}

components / From.js

const From = (props) => {
    return(
        <>
            <li className="from" key={props.key}>
                {props.author}
                <br/>
                {props.message}
            </li>
            <style jsx>{`
                .from {
                    width: 100%;
                    padding-top: 1vh;
                    padding-bottom: 1vh;
                    position: absolute;
                    left: 0px;
                }
            `}</style>
        </>
    )
}

export default From

components / To.js与From组件非常相似。

const To = (props) => {
    return(
        <>
            <li className="to" key={props.key}>
                {props.author}
                <br/>
                {props.message}
            </li>
            <style jsx>{`
                .to {
                    width: 100%;
                    padding-top: 1vh;
                    padding-bottom: 1vh;
                    position: absolute;
                    right: 20px;
                }
            `}</style>
        </>
    )
}

export default To