对象无效，无法作为React子对象（找到：带有键{information}的对象）

Question

学习React并停留在此错误

不变违反 对象作为React子对象无效（找到：带有键{information}的对象）。如果要渲染子级集合，请改用数组。

我在做什么错，在Array error部分感到困惑 以下是我的主要文件

Myinfo.js文件

import React from "react"
import Myinfoo from './Myinfoo'
import info from './info.js'

// function Myinfo() {
// const infomation = info.map(it => <Myinfoo key={it.id} name= {<h1>{it.name}</h1>} price ={it.price} description = {it.description}/>)
//     return (
//         <div className="todo">
//             {infomation}
//         </div>
//     )
// }
class Myinfo extends React.Component{
    constructor(){
        super()
        this.state = {
            infos: info
        }   
    }
    render(){
        //console.log(this.state.infos)
        const infod = [];
        const information = this.state.infos.map(it => <Myinfoo key={it.id} infos1={it} />)
        //const information = this.state.infos
        //console.log(information)
        return(
            {information}
        )
    }
}
export default Myinfo

Myinfoo .js文件

import React from "react"

// function Myinfoo(props) {
    

// }
class Myinfoo extends React.Component{
    render(){
        return (
            <div className="item">
                <input type="checkbox" checked={this.props.description} />

                <p style={{ display: this.props.name ? "block" : "none" }}>{this.props.name}</p>
                
            </div>
        )
    }
}
export default Myinfoo

这是我的Json数据 info.js

const info = [
    {
        id:"1",
        name:"Pencil",
        
        description : true
    },
    {
        id: "12",
        name: "Pencil1",
        
        description: false
    },
    {
        id: "1223",
        name: "Eraser",
        
        description: false
    },
    {
        id: "134",
        name: "Eraser1",
        
        description: true
    }


]



export default info

Answer 1

您需要一个根标签。试试这个：

return
(
    <div>
        {information}
    </div>
)