React is rendering [object object] rather than the JSX

问题

I'm trying to render out journal entries on my site with an object (not array) and I am running into an issue, here is my current code

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

}

When i call this function it renders "<div>[object object]</div>" and the text between the divs is plain text.

When i change the loop to say "journalEntries = <div...." it renders out the last journal entry as expected, but the issue is that it's not actually appending the journal entries with the loop.

ideas?

回答1:

Inspead of a defining journalEntries as a string define it as an array and push the JSX elements to the array in order to render like

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

}

When you append to the String, you are not actually appending a string but an object which is incorrect and hence you get [Object Object]

You can also use map to render your context. See this answer on how to use map:

REACT JS: Data Display and Array manipulation

回答2:

Why you don't use from .map(), try this:

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:

You don't need popluateJournal, just use this in 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:

you already have the journal data on state, why would you construct the element outside render? the correct way to do it is to map it directly on render.

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

remember to put the "key" on each mapped element.

来源：https://stackoverflow.com/questions/44492166/react-is-rendering-object-object-rather-than-the-jsx

标签

javascript

reactjs

jsx