ReactJs 0.14 - 不变违规:对象作为React子对象无效

Question

我找到了错误,但是比我聪明的人必须解释原因,因为我读过的所有内容都告诉我不要这样做,请看下面我的回复......

我正在使用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: []
        }
        ]
    }
}

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

作为一个奇怪的注释,当我从render方法中删除{this.state.blogPosts}时,错误就会消失,并且页面正确加载,即使在手动刷新时 也是如此.显然,我需要那里.

并且错误消息:

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

我不是一个受诅咒的线索,这是什么错误是告诉我,或如何纠正.

Answer 1

早些时候，在我解释这个问题时，并在回应观众的评论时，我说过我已经使用了与我的导航方法完全相同的方法，并且没有收到任何问题。这不是真的……

在我开始写这个博客之前，我读到 React 的人们强烈反对使用ComponentWillMount，而是使用ComponentDidMount。

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

componentDidMount() {
   this.getcompanyBlog()
}

问题开始发生。但是，当我将其更改为...

componentWillMount() {
   this.getcompanyBlog()
}

问题就消失了。

那么，React 大师是谁呢？我可以不使用 componentWillMount 吗？