ReactJS - Error:对象作为React子对象无效
ReactJS - Error:对象作为React子对象无效
提问于 2017-09-26 10:55:47
我试图理解在访问和显示检索到的部分JSON对象时做错了什么。我已经将返回的对象存储在返回的每条记录的数组中，并知道如何遍历JSON来访问JS中的正确属性/值，但是，在我的ReactJS组件中，我很难做到同样的事情。我的反应还比较新，似乎无法找到正确的方式来遍历和显示JSON属性和数组。用我目前的设置，我得到Error: Objects are not valid as a React child (found: object with keys {recordDateSlugEdit, ... If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons.任何帮助都将是非常感谢的。
返回JSON：
[
{
"recordDateSlugEdit": "2017-08-17",
"recordId": 119,
"title": "POS Core Campaign CPL Rose 40%",
"created_at": "2017-09-01T11:57:28.561Z",
"updated_at": "2017-09-01T11:57:45.798Z",
"user_id": 237,
"category_id": 81,
"app_user": {
"userIdHash": "",
"fullNameSlug": "Steve Matthews",
"firstName": "Steve",
"lastName": "Matthews"
},
"category": {
"categoryIdHash": "",
"categoryName": "Organic"
},
"record_comments": [
{
"createdAtDateSlug": "9\/1\/2017 8:13 AM",
"commentId": 11,
"comment": "Donec sem sapien, scelerisque fermentum interdum at, imperdiet vel dolor. Pellentesque fringilla elit eget risus maximus, aliquet luctus odio luctus. Sed pretium",
"recordId": 119,
"userId": 236,
"created_at": "2017-09-01T12:13:23.557Z",
"updated_at": "2017-09-01T12:13:23.557Z",
"record_id": 119,
"user_id": 236,
"app_user": {
"userIdHash": "oqX1p3EO5b",
"fullNameSlug": "Brad Feld",
"userId": 236,
"firstName": "Brad",
"lastName": "Feld",
}
}
]
},
{
"recordDateSlugEdit": "2017-08-08",
"recordId": 118,
"title": "Added New CTA to Pricing Page",
"user_id": 236,
"category_id": 82,
"app_user": {
"userIdHash": "",
"fullNameSlug": "Brad Feld",
"firstName": "Brad",
"lastName": "Feld",
},
"category": {
"categoryIdHash": "",
"categoryName": "Website"
},
"record_comments": [
]
}
]在这里，我希望访问位于每个JSON记录中的record_comments数组中的对象上的属性。
这里是我的组件设置：
import React from 'react';
import fetch from 'node-fetch';
//Comment Form
class CommentForm extends React.Component{
render() {
return (
<form action="/app/record/comment" method="post">
</form>
)
}
};
//Comments List
class Comments extends React.Component{
constructor(props, context) {
super(props, context);
this.state = this.context.data || window.__INITIAL_STATE__ || {records: []};
}
fetchList() {
fetch('http://localhost:3000/api/test')
.then(res => {
return res.json();
})
.then(data => {
let records = data.map((record) => {
return(
<div key={record.record_comments.commentId}>
<li>{record.record_comments.comment}</li>
</div>
)
})
this.setState({ records: data });
})
.catch(err => {
console.log(err);
});
}
componentDidMount() {
this.fetchList();
}
render() {
return (
<div>
<h2>Comments List</h2>
<ul>
{this.state.records}
</ul>
</div>
)
}
};
//Comment Container
export default class CommentBox extends React.Component {
render() {
return (
<div className="record-comment-form">
<h1>Sweet it Worked</h1>
<CommentForm />
<hr />
<Comments />
</div>
);
}
}回答 2
Stack Overflow用户
回答已采纳
发布于 2017-09-26 11:02:01
唯一可能是<ul>的子元素是<li>.In，您正在使用的是div。同时你也需要改变
setState({records:data})到setState({records})或setState({records:records})
fetchList() {
fetch('http://localhost:3000/api/test')
.then(res => {
return res.json();
})
.then(data => {
let records = data.map((record) => {
return(
<li key={record.record_comments.commentId}>{record.record_comments.comment}</li>
)
})
this.setState({ records:records});
})
.catch(err => {
console.log(err);
});
}Stack Overflow用户
发布于 2017-09-26 11:03:14
好像是在
this.setState({ records: data });数据-不是有效的dom元素。试着用
this.setState({ records });因为记录-似乎是一个由jsx元素组成的数组。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46424537
复制相关文章
相似问题
腾讯云开发者
