ネストされたオブジェクトの配列をループし、異なるマークアップをレンダリングします
Null isTrue
Reactアプリでうさぎの穴を叩きました。私はloopingこのオブジェクトの配列を通り抜けています：
const weeklyClasses = [
{
id: 1,
day: "Monday",
classDescription: [
{ classType: "11am-12pm Jazz", teacher: "Joe" },
{ classType: "1pm-2pm Blues", teacher: "Doe" },
{ classType: "3pm-4pm Samba", teacher: "Zen" }
]
},
{
id: 1,
day: "Tuesday",
classDescription: [
{ classType: "11am-12pm Rock", teacher: "Sis" },
{ classType: "1pm-2pm Tango", teacher: "Ter" },
{ classType: "3pm-4pm Salsa", teacher: "Soul" }
]
},
// ...
];
ループして目的の値を取得していますが、現在はclassType1つの出力として出力されていますp
const Data = () => {
return weeklyClasses.map((o, i) => {
return (
<div className="classDay" key={o.id}>
{o.day}
<div className="classType">
{o.classType}
//Right here
<p>{o.classDescription.map(i => i.classType)}</p>
</div>
</div>
);
});
};
それぞれ classTypeをdiff pタグとして出力するにはどうすればよいですか？
地図にマッピングしても大丈夫ですか？（どうすればよいですか）代わりにreduceを使用しますか？
nem035
説明の配列全体を1つにまとめるのではなくp：
<p>{o.classDescription.map(i => i.classType)}</p>
p代わりに、各クラスの説明要素を次のようにラップできます。
{o.classDescription.map(i => <p>{i.classType}</p> )}
{/* ^^^ ^^^^ */}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
オブジェクト配列を、プライマリオブジェクトのルート内にネストされた一致するセカンダリオブジェクトとマージします
- 2
ネストされたループのない配列を使用してオブジェクトの配列をフィルタリングするjs
- 3
React Redux-変更されたオブジェクト（配列内）を保持しているコンポーネントのみを再レンダリングしながら、配列をマッピングします
- 4
マップするオブジェクトの配列なしでReact.jsの要素をループしてレンダリングする方法は？
- 5
ネストされたオブジェクトの配列をreactでレンダリングします
- 6
ネストされたjsonオブジェクトにアクセスし、条件付きマーカーレンダリングを使用してリーフレットマップでマーカーを表示する方法
- 7
データ内のオブジェクトのネストされたループを使用してSectionListをレンダリングする方法
- 8
Ember配列が更新されると、各ループがオブジェクトの配列全体を再レンダリングします
- 9
オブジェクトの配列をタイムスタンプでグループ化された新しい構造にマップします
- 10
オブジェクトでネストされた配列を使用する場合、プログラムでチェックボックスをオンにしても変更はレンダリングされません
- 11
ネストされたオブジェクトデータを含むオブジェクトをループし、カード内のデータを使用してレンダリングしようとしています
- 12
ハンドルバーは、NodeExpressアプリのjson配列から余分な空のオブジェクトをレンダリングします
- 13
ハンドルバーを使用したオブジェクトのネストされた配列のレンダリング
- 14
React Reduxでビュー（UI）を再レンダリングしないネストされたオブジェクトのフィールドを更新する
- 15
JQueryDatatablesのネストされたjsonオブジェクトの列値をレンダリングします
- 16
ネストされたJson文字列をオブジェクトに変換し、Jqueryデータテーブルセルにレンダリングします
- 17
React：オブジェクトの配列（偽のデータ）にマップして、単語の配列をレンダリングします
- 18
マングースはネストされた配列からオブジェクトを削除します
- 19
Googleマップは、状態配列から最後にレンダリングされたオブジェクトのマーカーを表示するだけで反応します
- 20
オブジェクトのネストされた配列を再帰的にループして、ネストされたリストを作成します
- 21
マングースプッシュ-オブジェクトの配列を検索または更新します
- 22
深いネストされたキーによって重複をマッピングした後、オブジェクトの配列全体を取得します
- 23
マングースはレコードの配列内のネストされたオブジェクトを更新します
- 24
マップオブジェクト（動的なキーと値を含む）を角度のあるマットテーブル（マップのキーと値としての列と行）にレンダリングします
- 25
オブジェクトのネストされた配列をループし、オブジェクトの別の配列と照合します
- 26
Reduxストアからのオブジェクトの配列をReactコンポーネントとしてレンダリングします
- 27
Laravelのグループ化されたコレクションは配列ではなくオブジェクトを返します
- 28
ネストされたレベルを持つオブジェクトの配列をグループ化します
- 29
マングースを使用して、参照されたオブジェクトの配列から要素をプルすることは可能ですか？
コメントを追加