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

将一个定义-agentlib:jdwp=transport=dt_socket,server=y,address=${port}作为字符串的Inspead将其定义为一个数组并将JSX元素推送到数组以便呈现为

.concat(this.args.args)

当你附加到String时，你实际上并没有附加一个字符串，而是一个不正确的对象，因此你得到var arg

您还可以使用地图渲染上下文。请参阅此答案，了解如何使用地图：

REACT JS: Data Display and Array manipulation

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

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

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

记得放上＆＃34;键＆＃34;在每个映射的元素上。

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

4 个答案: