web-dev-qa-db-fra.com

React rend [objet objet] plutôt que JSX

J'essaie de rendre les entrées de journal sur mon site avec un objet (pas un tableau) et je rencontre un problème, voici mon code actuel

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

}

Lorsque j'appelle cette fonction, elle rend "<div>[object object]</div>" et le texte entre les divs est du texte brut.

Quand je change la boucle pour dire "journalEntries = <div.... "il affiche la dernière entrée de journal comme prévu, mais le problème est qu'il n'ajoute pas réellement les entrées de journal avec la boucle.

des idées?

javascriptreactjsjsx
15
ELI7VH

Inspiré d'un journalEntries définissant comme une chaîne, définissez-le comme un tableau et poussez les éléments JSX dans le tableau afin de rendre comme

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

}

Lorsque vous ajoutez à la chaîne, vous n'ajoutez pas réellement une chaîne mais un objet qui est incorrect et donc vous obtenez [Object Object]

Vous pouvez également utiliser la carte pour rendre votre contexte. Voir cette réponse sur la façon d'utiliser la carte:

REACT JS: affichage des données et manipulation des tableaux

17
Shubham Khatri

Pourquoi vous n'utilisez pas de .map(), essayez ceci:

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
Alireza Valizade

Vous n'avez pas besoin de popluateJournal, utilisez simplement ceci dans 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>
    );
}
2
bier hier

vous avez déjà les données du journal sur l'état, pourquoi voudriez-vous construire l'élément en dehors du rendu? la bonne façon de le faire est de le mapper directement sur le rendu.

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

n'oubliez pas de mettre la "clé" sur chaque élément mappé.

1
Grand Julivan