Javascript React 正在渲染 [object object] 而不是 JSX
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44492166/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React is rendering [object object] rather than the JSX
提问by ELI7VH
I'm trying to render out journal entries on my site with an object (not array) and I am running into an issue, here is my current code
我正在尝试使用对象（不是数组）在我的网站上呈现日志条目，但遇到了一个问题，这是我当前的代码
populateJournal(){
const j = Object.values(this.state.journal);
var journalEntries = '';
for (var i = 0; i < j.length; i++){
journalEntries+=
<div>
<h3>{j[i].title} - {j[i].date}</h3>
<p>{j[i].entry}</p>
</div>;
}
return(<div>{journalEntries}</div>);
}
}
When i call this function it renders "<div>[object object]</div>"and the text between the divs is plain text.
当我调用此函数时，它会呈现"<div>[object object]</div>"并且 div 之间的文本是纯文本。
When i change the loop to say "journalEntries = <div...." it renders out the last journal entry as expected, but the issue is that it's not actually appending the journal entries with the loop.
当我将循环更改为“ journalEntries = <div....”时，它会按预期呈现最后一个日志条目，但问题是它实际上并未将循环附加到日志条目。
ideas?
想法？
回答by Shubham Khatri
Inspead of a defining journalEntriesas a string define it as an array and push the JSX elements to the array in order to render like
代替定义 journalEntries为字符串将其定义为数组并将 JSX 元素推送到数组以呈现类似
populateJournal(){
const j = Object.values(this.state.journal);
var journalEntries = [];
for (var i = 0; i < j.length; i++){
journalEntries.push(
<div>
<h3>{j[i].title} - {j[i].date}</h3>
<p>{j[i].entry}</p>
</div>);
}
return(<div>{journalEntries}</div>);
}
When you append to the String, you are not actually appending a string but an object which is incorrect and hence you get [Object Object]
当您附加到字符串时，您实际上并没有附加一个字符串，而是一个不正确的对象，因此您会得到 [Object Object]
You can also use map to render your context. See this answer on how to use map:
您还可以使用地图来呈现您的上下文。请参阅有关如何使用地图的答案：
回答by ELI7VH
Why you don't use from .map(), try this:
为什么不使用 from .map()，试试这个：
render(){
const j = Object.values(this.state.journal);
return(
<div>
{j.map((item,index) =>
<div key={index}>
<h3>{item.title} - {item.date}</h3>
<p>{item.entry}</p>
</div>
)}
</div>
);
}
回答by bier hier
You don't need popluateJournal, just use this in render():
您不需要 popluateJournal，只需在 render() 中使用它：
render() {
//const j = Object.values(this.state.journal);
const j = [{'title':'one','date':'12/03/17','entry':'This is an entry'},
{'title':'two','date':'14/03/17','entry':'This is another entry'}
];
//inject j as property into Test
const Test = ({journals}) => (
<div>
{journals.map(journal => (
<div>
<h3>{journal.title} - {journal.date}</h3>
<p>{journal.entry}</p>
</div>
))}
</div>
);
return (
<div><Test journals={j}></Test></div>
);
}
回答by Grand Julivan
you already have the journal data on state, why would you construct the element outside render? the correct way to do it is to map it directly on render.
你已经有了状态的日志数据，你为什么要在渲染之外构造元素？正确的做法是将其直接映射到渲染上。
populateJournal(){
const j = Object.values(this.state.journal);
return(<div>{
j && j.map((journal,i)=>{
return ( <div key={"journal"+i}>
<h3>{journal.title} - {journal.date}</h3>
<p>{journal.entry}</p>
</div>
})
}</div>);
}
remember to put the "key" on each mapped element.
请记住将“键”放在每个映射元素上。
