ReactJs 0.14 – 不变违规：对象作为React子对象无效

I found the error but someone far smarter than me has to explain why,as everything I have read has told me NOT to do it this way,see below response from me …..

我正在使用react-hot-loader.当我进行更改并重新加载页面时,我没有收到任何错误.但是,当我手动刷新页面时,我收到上面标题中的错误.

简单的JSON数据：

const companyBlog = [
{
    blogTitle: "Company Blog",blogLinkTo: "companyBlog",blogTagLine: 'If you have any questions,contact us',blogPosts: [
        {
            createDate: "2015-02-10T10:50:42.389Z",linkTo: "blogPost1Link",title: "This is the title to Blog Post 1",content: "<p>This is the content to Blog Post 1</p>",author: "John Smith",categories: [1,3]
        },{
            createDate: "2015-07-05T10:50:42.389Z",linkTo: "blogPost2Link",title: "This is the title to Blog Post 2",content: "<p>This is the content to Blog Post 2</p>",author: "Jane Doe",categories: [2,{
            createDate: "2015-04-22T10:50:42.389Z",linkTo: "blogPost3Link",title: "This is the title to Blog Post 3",content: "<p>This is the content to Blog Post 3</p>",4]
        }
    ]
  }
];

获取博客数据：

getcompanyBlog() {
    let results = [];
    this.setState({
        blogTitle: companyBlog[0].blogTitle,blogLinkTo: companyBlog[0].blogLinkTo,blogTagLine: companyBlog[0].blogTagLine
    });

    companyBlog[0].blogPosts.map(function (post,index) {
        let dateArry = new Date(post.createDate).toString().split(' ');
        return(
            results.push(
                <li key= { index }>
                    <time dateTime={ post.createDate }>
                        <span>{ dateArry[1]}</span>
                        <strong>{ dateArry[2] }</strong>
                    </time>
                    <Link to='test'>{ post.title }</Link>
                </li>
            )
        )
    }.bind(this))
    this.setState({blogPosts: results});
}

渲染结果：

render() {
    return (
        <div>
            { this.state.blogPosts }
        </div>
    )
}

更新：这是我的构造函数：

constructor(props) {
    super(props);
    this.state = {
        blogTitle: '',blogLinkTo: '',blogTagLine: '',blogPosts: [{
            createDate: '',linkTo: '',title: '',content: '',author: '',categories: []
        }
        ]
    }
}

我在导航菜单及其子菜单项中使用了这种相同的方法,并且没有收到任何错误.

As a curIoUs note,the error goes away,and the page loads properly,even on manual refresh when I remove
{ this.state.blogPosts } from the render method.
ObvIoUsly though,I need that there.

并且错误消息：

未捕获错误：不变违规：对象无效作为React子对象(找到：具有键{createDate,linkTo,title,content,author,categories}的对象).如果您要渲染子集合,请使用数组,或使用React附加组件中的createFragment(object)包装对象.检查BlogSideBar的render方法.

我不知道这个错误告诉我什么或如何纠正.

Earlier in my explanation of this problem,and in response to a viewer’s comment,I said that I have used this exact same method with my navigation method and received no problems. That is not true….

在我开始处理这个博客之前,我先阅读了React的人们如何强烈反对使用ComponentwillMount而不是使用ComponentDidMount.

在这个博客示例中,与我提到的导航不同,我使用….

componentDidMount() {
   this.getcompanyBlog()
}

并且问题开始发生.但是,当我把它改为……

componentwillMount() {
   this.getcompanyBlog()
}

问题消失了.

那React大师呢？我可以不使用componentwillMount吗？

原文地址：https://www.jb51.cc/react/301002.html