在React中渲染JavaScript对象 [英] Rendering JavaScript Object in React
问题描述
我有一个React项目设置为从Firebase数据库中获取对象并将其呈现给我的页面。然而,我不知道如何正确呈现数据。
我提取的数据如下所示:
<$
projects:{
0:{
title:test,
function: test2
,
1:{
title:test3,
function:test4
}
}
}
在Chrome React调试器中,我看到:
< div>
< Message key =0data = {function:test2,title:test,key:0}> ...< / Message>
< Message key =1data = {function:test4,title:test3,key:1}> ...< / Message>
< / div>
但是在元素视图中,我只是看到两个空的div:
< div>
< div>< / div> == $ 0
< div>< / div>
< / div>
目前我正在传递< Message key = {index} data = {消息} />
添加到包含 {this.props.message}
<编辑:改变这个{this.props.data},因为没有消息道具传递给消息组件
重构代码: < DIV> key = {index} data = {message}< / div>
然而,返回错误
对象不是作为一个React孩子有效(找到:具有键{function,title,key}的对象)。如果您打算渲染一个子集合,则可以使用一个数组,或者使用React附加组件中的createFragment(object)来包装该对象。检查ProjectList的渲染方法。
看到项目项目有键我不相信CreateFragment是正确的解决方案。此外,Firebase支持将键传递给数组,所以我得到的解决方案似乎不适用于这种情况。但我怎样才能控制如何在页面上呈现对象?
我完整的ProjectList组件如下所示:
import从react反应;
从firebase导入firebase;
从'lodash'导入_;
导入来自'./Message'的消息
$ b $ class ProjectList extends React.Component {
constructor(props){
super(props);
this.state = {
messages:{}
};
this.firebaseRef = firebase.database()。ref('projects');
this.firebaseRef.on(child_added,(msg)=> {
if(this.state.messages [msg.key]){
return;
}
让msgVal = msg.val();
msgVal.key = msg.key;
this.state.messages [msgVal.key] = msgVal;
this.setState({messages:this.state.messages});
});
$ b $ render(){
var messageNodes = _.values(this.state.messages).map((message,index)=> {
(
< Message key = {index} data = {message} />
);
});
$ b $ return(
< div>
{messageNodes}
< / div>
);
}
}
导出默认ProjectList;
谢谢!
编辑:消息组件呈现为 {this.props.data}
,因为消息组件不接收消息道具。
render(){
return< div> {this.props.data}< / div>
}
I have a React project set up to fetch an Object from a Firebase database and render this to my page. However I do not know how to render the data properly.
The data I am fetching looks like this:
{
"projects": {
"0": {
"title": "test",
"function": "test2"
},
"1": {
"title": "test3",
"function": "test4"
}
}
}
In the Chrome React Debugger I see this:
<div>
<Message key="0" data={function: "test2", title: "test", key: "0"}>...</Message>
<Message key="1" data={function: "test4", title: "test3", key: "1"}>...</Message>
</div>
But in the elements view I am simply seeing two empty divs:
<div>
<div></div> == $0
<div></div>
</div>
Currently I am passing <Message key={index} data={message} />
to a Message component containing {this.props.message}
EDIT: Changed this to {this.props.data} since no message prop was passed to Message component
Refactoring the code to: <div> key={index} data={message} </div>
however returns the error
Objects are not valid as a React child (found: object with keys {function, title, key}). 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. Check the render method of ProjectList.
Seeing as the project items have keys I do not believe CreateFragment is the correct solution. Also Firebase favors passing objects with keys over arrays so the solutions I am given does not seem to work in this situation. But how can I then control how the objects are rendered on the page?
My complete ProjectList component looks like this:
import React from 'react';
import firebase from 'firebase';
import _ from 'lodash';
import Message from './Message'
class ProjectList extends React.Component {
constructor(props){
super(props);
this.state = {
messages: {}
};
this.firebaseRef = firebase.database().ref('projects');
this.firebaseRef.on("child_added", (msg)=> {
if(this.state.messages[msg.key]){
return;
}
let msgVal = msg.val();
msgVal.key = msg.key;
this.state.messages[msgVal.key] = msgVal;
this.setState({messages: this.state.messages});
});
}
render(){
var messageNodes = _.values(this.state.messages).map((message, index)=> {
return (
<Message key={index} data={message} />
);
});
return (
<div>
{messageNodes}
</div>
);
}
}
export default ProjectList;
Thanks!
Edit: changed the Message component render to {this.props.data}
as Message component receives no message prop.
Change your Message
render method to:
render() {
return <div>{this.props.data}</div>
}
这篇关于在React中渲染JavaScript对象的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!