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

Question

我正在尝试使用对象(而不是数组)在我的网站上呈现日记条目,我遇到了一个问题,这是我当前的代码

  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...."时,它会按预期呈现最后一个日记帐分录,但问题是它实际上并没有附加循环的日记帐分录.

想法？

Answer 1

将一个定义journalEntries为字符串的Inspead将其定义 为一个数组,并将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>);

}

当你附加到String时,你实际上并没有附加一个字符串,而是一个不正确的对象,因此你得到了 [Object Object]

您还可以使用map来渲染上下文.有关如何使用地图,请参阅此答案:

REACT JS:数据显示和数组操作

Answer 2

为什么不使用 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>
    );
}