我正在尝试使用对象（不是数组）在我的网站上呈现日记条目，但遇到了一个问题，这是我当前的代码
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>);
}
当我调用此函数时，它会呈现"<div>[object object]</div>"并且 div 之间的文本是纯文本。
当我将循环更改为“ journalEntries = <div....”时，它会按预期呈现最后一个日志条目，但问题是它实际上并未将循环附加到日志条目。
想法？
代替定义 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>);
}
当您附加到字符串时，您实际上并没有附加一个字符串，而是一个不正确的对象，因此您会得到 [Object Object]
您还可以使用地图来呈现您的上下文。请参阅有关如何使用地图的答案：
为什么不使用 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>
);
}
你不需要 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>
);
}
你已经有了状态的日志数据，你为什么要在渲染之外构造元素？正确的做法是将其直接映射到渲染上。
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>);
}
请记住将“键”放在每个映射元素上。