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