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

【问题标题】：React is rendering [object object] rather than the JSXReact 正在渲染 [object object] 而不是 JSX
【发布时间】：2017-11-13 12:00:54
【问题描述】：

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

  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+= "bla bla bla" 放入引号中，或者更好地将其移至另一个返回 JSX 语句的函数

标签： javascript reactjs jsx

【解决方案1】：

而不是将 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 JS: Data Display and Array manipulation

【讨论】：

谢谢，这正是问题所在。我没有使用 map 的原因是因为我无法让它与“对象”一起使用它似乎只适用于数组......也许我只是超级菜鸟，但我错过了什么吗？
很高兴有帮助:)
是的 map 仅适用于数组，对于对象，您需要遍历 Object.keys()。我将添加一个示例解决方案的链接来回答相同的问题
看到这个答案：stackoverflow.com/questions/43721168/…
谢谢，这开始变得更有意义了。也谢谢你的链接，你帮了很大的忙:)

【解决方案2】：

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

【讨论】：

谢谢，我试过了，它奏效了。那是更简洁的代码......我以前从未使用地图来处理我的对象。这很有帮助。

【解决方案3】：

你不需要 popluateJournal，只需在 render() 中使用它：

 render() {
    //const j = Object.values(this.state.journal);
    const j = [{'title':'one','date':'12/03/17','entry':'This is an entry'},
            {'title':'two','date':'14/03/17','entry':'This is another entry'}
        ];

    //inject j as property into Test
    const Test = ({journals}) => (
            <div>
                {journals.map(journal => (
                    <div>
                        <h3>{journal.title} - {journal.date}</h3>
                        <p>{journal.entry}</p>
                    </div>
                ))}
            </div>
        );

    return (
            <div><Test journals={j}></Test></div>
    );
}

【讨论】：

【解决方案4】：

你已经有了状态的日志数据，为什么要在渲染之外构造元素？正确的做法是直接在渲染上映射。

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

记得把“key”放在每个映射的元素上。

【讨论】：

出于某种原因，我的印象是您不想在渲染中执行逻辑......谢谢，我以为我尝试了这个“地图”，但它给了我一个错误“不能使用对象，只能使用数组”我会再试一次
我认为“var j”是一个数组？因为您正在对其进行迭代？没有？
所以它实际上是一个“对象”而不是“数组”？但我认为做“Object.values”会把它变成一个数组？我真的不知道，但是...您的代码对我不起作用...