我正在尝试使用对象(而非数组)在网站上呈现日记条目,但遇到了问题,这是我当前的代码
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之间的文本为纯文本。
"<div>[object object]</div>"
当我将循环更改为说“ journalEntries = <div....”时,它将按预期方式渲染出最后一个日记帐分录,但是问题是它实际上并未在日记帐分录中附加循环。
journalEntries = <div....
想法?
放弃定义 journalEntries为字符串,将其定义为数组,然后将JSX元素推入数组以进行渲染
journalEntries
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]
[Object Object]
您还可以使用地图来渲染上下文。