web-dev-qa-db-ja.com

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

}

この関数を呼び出すと、"<div>[object object]</div>"およびdiv間のテキストはプレーンテキストです。

ループを変更して「journalEntries = <div.... "予想どおり最後のジャーナルエントリをレンダリングしますが、問題は実際にループにジャーナルエントリを追加しないことです。

アイデア？

javascriptreactjsjsx
15
ELI7VH

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：データ表示と配列操作

17
Shubham Khatri

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

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>
    );
}
2
bier hier

すでに状態のジャーナルデータがありますが、なぜレンダリングの外側に要素を構築するのですか？正しい方法は、レンダリング時に直接マップすることです。

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

マッピングされた各要素に「キー」を忘れずに配置してください。

1
Grand Julivan