React正在渲染[object object]而不是JSX

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在尝试使用对象（而非数组）在网站上呈现日记条目，但遇到了问题，这是我当前的代码

  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]

您还可以使用地图来渲染上下文。

以上是 React正在渲染[object object]而不是JSX 的全部内容， 来源链接： utcz.com/qa/426971.html

回到顶部