react.js - react 抛出Uncaught Error错误

问题描述

问 题

在浏览器上抛出一下错误:

Objects are not valid as a React child (found: object with keys {title, time, post, imgUrl, lession, contentList}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `Experience`.

我的数据格式为

   let ResumeData = {
        "experience" : {
            "title":"experience",
            "experienceList":[
                {
                    "title" : "react title",
                    "time" : "2017.08",
                    "post"  : "react",
                    "imgUrl" : "./../../images/experience/e.svg",
                    "lession" : "aaa111",
                    "contentList":[
                        "aaa",
                        "bbb",
                        "ccc",
                        "ddd"
                    ]
                },{
                    "title" : "react title",
                    "time" : "2017.08",
                    "post"  : "react",
                    "imgUrl" : "./../../images/experience/e.svg",
                    "lession" : "aaa111",
                    "contentList":[
                        "aaa",
                        "bbb",
                        "ccc",
                        "ddd"
                    ]
                },{
                    "title" : "react title",
                    "time" : "2017.08",
                    "post"  : "react",
                    "imgUrl" : "./../../images/experience/e.svg",
                    "lession" : "aaa111",
                    "contentList":[
                        "aaa",
                        "bbb",
                        "ccc",
                        "ddd"
                    ]
            }
        ]
}

方法一:

   React.Children.map(ResumeData.experience.experienceList,(val,index)=>{
        return (
            <Content key={index} index={index} val={val} />                                    
            )
        })

方法二:

     let children = React.Children.toArray(ResumeData.experience.experienceList);   
    children.map((val,index)=>{
        return (
            <Content key={index} index={index} val={val} />                                    
            )
        })

以上两种方法都用了，抛出的错误是一样的。求解

解决方案

ResumeData.experience.experienceList是一个普通JS对象，不能用于React.Children。可以这样写：

const contentList = ResumeData.experience.experienceList.map((item, index) => {
                        return ( <Content key={index} index={index} val={val} /> )
                    })

contentList就是你要渲染的Content组件组成的列表。

这篇关于react.js - react 抛出Uncaught Error错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！