Javascript React正在呈现[object object]，而不是JSX

我试图用一个对象（不是数组）在我的站点上呈现日志条目，但遇到了一个问题，下面是我当前的代码

  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>);

populateJournal（）{
const j=Object.values（this.state.journal）；
var journalEntries=''；
对于（变量i=0；i
;
}
返回（{journalEntries}）；

}

当我调用此函数时，它会呈现

“[object object]”

，div之间的文本是纯文本

---

当我将循环更改为“

journalEntries=作为字符串定义
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>);

}

populateJournal（）{
const j=Object.values（this.state.journal）；
var journalEntries=[]；
对于（变量i=0；i
);
}
返回（{journalEntries}）；
}

当您附加到字符串时，实际上并不是在附加字符串，而是一个不正确的对象，因此您得到了
[object object]

您还可以使用map呈现您的上下文。有关如何使用map，请参阅以下答案：

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

render（）{
const j=Object.values（this.state.journal）；
返回(
{j.map（（项目，索引）=>
{item.title}-{item.date}
{item.entry}

)}
);
}
您不需要popluateJournal，只需在render（）中使用它即可：

render（）{
//const j=Object.values（this.state.journal）；
const j=[{'title'：'one'，'date'：'12/03/17'，'entry'：'This is a entry'}，
{'title'：'two'，'date'：'14/03/17'，'entry'：'这是另一个条目'}
];
//将j作为属性注入测试
常量测试=（{journals}）=>(
{journals.map（journal=>(
{journal.title}-{journal.date}
{journal.entry}

))}
);
返回(
);
}
您已经拥有州政府的日志数据，
为什么要在渲染外部构造元素？
正确的方法是直接在渲染上映射它

 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>);
}

populateJournal（）{
const j=Object.values（this.state.journal）；
返回({
j&j.map（（杂志，i）=>{
报税表（
{journal.title}-{journal.date}
{journal.entry}

})
});
}

请记住在每个映射元素上加上“键”。
尝试将journalEntries+=“bla-bla-bla”放在引号中，或者最好将它移到另一个返回JSX语句的函数中。谢谢，这正是问题所在。我没有使用map的原因是因为我无法让它处理“对象”“它似乎只适用于数组……也许我只是个超级noob，但我遗漏了什么吗？很高兴能提供帮助：）是的，映射仅适用于数组，对于对象，您需要在Object.keys（）上循环。我将添加一个链接到一个示例解决方案，以回答相同的问题。请回答：谢谢，这开始变得更有意义了。也谢谢你的链接，你帮了我很大的忙：）出于某种原因，我觉得你不想在渲染中使用逻辑。。。。谢谢，我以为我试过这个“映射”，但它给了我一个错误“不能使用对象，只能使用数组”我会再试一次我以为“var j”是数组？因为你正在对它进行迭代？不是吗？所以它实际上是一个“对象”而不是一个“数组”？但是我认为做“Object.values”会把它变成一个数组吗？我真的不知道，但是。。。你的代码对我不起作用…谢谢，我试过了，它起作用了。这是更干净的代码。。。我以前从未让map来处理我的物体。这很有帮助。
 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>);
}