ReactJS を使用して配列内の配列からデータを取得する

debugcn 投稿 Dev

ニール・ケルシー

ReactJS は初めてですが、少し前進していると思います...

私が考えて、ここで私が達成しようとしてんだよ...私はほとんどそこだが、私は私が私の最後のハードル十分に近いと思われるもので倒れました。

テレビ番組 - シンプソンズ

名前：バート・シンプソン、性別：男性
名前：ホーマー・シンプソン、性別：男性
名前：ネッド・フランダース性別：男性

テレビ番組 - 原始家族フリントストーン

名前：フレッド・フリントストーン、性別：男性
名前：バーニー・ラブル、性別：男性
名前：ウィルマ・フリントストーン、性別：女性

これらを何百個も持つことができるので、これらを 2 つの React 要素で構築したくはありません。そのため、満足のいくようにデータを整理しました。

var shows = [
{
  id: 1,
  show: 'Simpsons',
  characters: [
  { id: 1, name: 'Bart Simpson', gender: 'Male'},
  { id: 2, name: 'Homer Simpson', gender: 'Male'},
  { id: 3, name: 'Ned Flanders', gender: 'Male'}
]
},
{
  id: 2,
  show: 'Flintstones',
  characters: [
    { id: 1, name: 'Fred Flintstone', gender: 'Male'},
    { id: 2, name: 'Barney Rubble', gender: 'Male'},
    { id: 3, name: 'Wilma Flintstone', gender: 'Female'}
]
}
];

そして、次のようなテーブルを使用してデータを構築しています。

const ShowsTable = (props) => {
    return (
    <div>
      <h1>Show - {props.show}</h1>
      <table>
        <tr>
          <th>Name</th>
          <th>Gender</th>
        </tr>
        <tr>
          <td>XXX</td>
          <td>YYY</td>
        </tr>
      </table>
    </div>
  );
};

ショー名とメイン配列から何かを取得できるこの「機能」がありますが、ネストされた「キャラクター」子配列からデータを取得できません

したがって、XXX と YYY は、名前または性別のデータを取得したい場所です。私の考えでは、次のようなことができるはずです...

{props.characters}

または、ネストされた要素を取得して、次のようなものを取得する可能性があります

{props.characters.props.name}

しかし、これを理解することも、これに関するドキュメントを見つけることもできません。つまり、これは構文エラーなのか、それとももっと根本的なものが欠けているのでしょうか... 間違った質問をしているのでしょうか? よくわからない

誰かが説明やドキュメントで私を正しい方向に向けることができれば、私は非常に感謝します:-)

死亡しました

次のようなことができます:

const ShowsTable = (props) => {
    return (
        <div>
          <h1>Show - {props.show}</h1>
          <table>
              <tr>
                  <th>Name</th>
                  <th>Gender</th>
              </tr>

              {props.characters.map((char, index) => (
                  <tr key={index}>
                      <td>{char.name}</td>
                      <td>{char.gender}</td>
                  </tr>
               ))}    
            </table>
        </div>
    );
};

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]