我试图用一个对象(不是数组)在我的站点上呈现日志条目,但遇到了一个问题,下面是我当前的代码
populateJournal(){
const j=Object.values(this.state.journal);
var journalEntries='';
对于(变量i=0;i<;j.length;i++){
期刊+=
<;div>;
<;h3>;{j[i].标题}-{j[i].日期}<;/h3>;
<;p>;{j[i].条目}<;/p>;
<;/div>;;
}
返回(<;div>;{journalEntries}<;/div>;);
}
调用此函数时,它会呈现“<;div>;[object object]<;/div>;”
,div之间的文本是纯文本
当我将循环更改为“journalEntries=<;div…”
”时,它会按预期呈现最后一个日记账条目,但问题是它实际上并没有将日记账条目附加到循环中
想法
在定义为字符串的journalEntries
中,将其定义为数组,并将JSX元素推送到数组中以进行类似的渲染
populateJournal(){
const j=Object.values(this.state.journal);
var journalEntries=[];
对于(变量i=0;i<;j.length;i++){
推(
<;div>;
<;h3>;{j[i].标题}-{j[i].日期}<;/h3>;
<;p>;{j[i].条目}<;/p>;
<;/div>;);
}
返回(<;div>;{journalEntries}<;/div>;);
}
当您附加到字符串时,实际上并不是在附加字符串,而是一个不正确的对象,因此您得到了[object object]
还可以使用“贴图”渲染上下文。有关如何使用地图,请参见以下答案:
REACT JS:数据显示和数组操作