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的呈现方法。

我没有 friggin 线索这个错误告诉我的内容或如何纠正。

Answer 1

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

在我开始撰写此博客之前，我了解了React的用户如何强烈反对使用 ComponentWillMount ，而是使用 ComponentDidMount 。

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

componentDidMount() {
   this.getcompanyBlog()
}

问题开始发生。但是，当我把它改为......时，

componentWillMount() {
   this.getcompanyBlog()
}

问题消失了。

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

Answer 2

这种模式应该更好。杰夫有正确的想法。

    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>
    )
    }

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

2 个答案: