ReactJs 0.14 - 不变违规：对象作为 React 子级无效答案

【问题标题】：ReactJs 0.14 - Invariant Violation: Objects are not valid as a React childReactJs 0.14 - 不变违规：对象作为 React 子级无效
【发布时间】：2015-10-16 15:07:23
【问题描述】：

我发现了错误，但比我聪明得多的人必须解释原因，因为我读过的所有内容都告诉我不要这样做，请参阅下面的回复......

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

我对导航菜单及其子菜单项使用了同样的方法，没有收到任何错误。

奇怪的提示，错误消失了，页面加载正常，即使在我删除时手动刷新 { this.state.blogPosts } 来自 render 方法。显然，我需要那个。

以及错误信息：

未捕获的错误：不变违规：对象作为 React 子项无效（发现：对象带有键 {createDate, linkTo, title, content, author, categories}）。如果您打算渲染一组子项，请改用数组或使用 React 附加组件中的 createFragment(object) 包装对象。检查BlogSideBar的渲染方法。

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

【问题讨论】：

我对新的 'let' 关键字没有太多经验，但据我了解，它限制了变量的范围。您确定可以在地图功能中推送到它吗？您是否尝试过在渲染函数中记录状态对象以使用 Web 检查器对其进行检查？
我已经使用了同样的方法，例如，导航菜单和它的子子项，没有收到这个错误。 let 位于此函数的开头，可以在整个函数中完全访问。
当你升级 react.. 这样的新错误出现时，这很糟糕。这个错误在 0.13 中从未发生过，现在他们告诉我必须重新设计我的代码，在这个范式集成到我的应用程序中之后？干得好。现在我知道你大部分时间都去哪里了..

标签： reactjs

【解决方案1】：

在我之前对这个问题的解释中，为了回应观众的评论，我说我在导航方法中使用了完全相同的方法并且没有收到任何问题。这不是真的....

在开始撰写此博客之前，我阅读了 React 的人们如何强烈反对使用 ComponentWillMount，而改用 ComponentDidMount。

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

componentDidMount() {
   this.getcompanyBlog()
}

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

componentWillMount() {
   this.getcompanyBlog()
}

问题消失了。

React 大师是谁？我可以不使用 componentWillMount 吗？

【讨论】：

当您使用 componentDidMount 时，react 试图渲染您的数据而不是地图中的 jsx。这就是 componentWillMount 起作用的原因，因为现在 react 正在从地图中渲染您的 jsx。
那么，我以后继续使用 componentWillMount() 处理这样的事情是可以接受的吗？
最好用 {blogPosts: []} 初始化状态并在 this.state.blogPosts.length = 0 时返回 null 因为不能保证 getcompanyBlog() 会在渲染之前返回 jsx .在这种情况下，使用 will mount 还是 did mount 都无关紧要。

【解决方案2】：

这种模式应该会更好。 Jeff 的想法是对的。

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

    render() {
    if (this.state.blogPosts.length == 0) return null;
        let results = this.state.blogPosts.map(function (post, index) {
                let dateArry = new Date(post.createDate).toString().split(' ');
                return(
                    <li key= { index }>
                            <time dateTime={ post.createDate }>
                                    <span>{ dateArry[1]}</span>
                                    <strong>{ dateArry[2] }</strong>
                            </time>
                            <Link to='test'>{ post.title }</Link>
                    </li>
                )
        }, this)
    return (
        <ul>
            { results }
        </ul>
    )
    }

【讨论】：