ReactJs 0.14 - 不变违规 : Objects are not valid as a React child

Question

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, 3]
        },
        {
            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>",
            author: "John Smith",
            categories: [1, 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、标题、内容、作者、类别}的对象)。如果您打算渲染子集合，请使用数组或使用 React 附加组件中的 createFragment(object) 包装对象。检查 BlogSideBar 的渲染方法。

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

Answer 1

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吗？