は、個々のリストアイテムに二つの異なるエンドポイントからの情報

Question

取得私は2つの異なる状態（両方の配列ですstate.namesとstate.ages）を通過している私の親アプリケーションコンポーネントからのデータを持っています。私のカードコンポーネントでは、このデータを使用して個々のカードリストアイテム（各キャラクターの名前と年齢を示す）をレンダリングします。私はこれらの2つの配列をどのように組み合わせるかを理解することができませんでした。私は両方をマッピングしましたが、名前を対応する年齢と一致させたいと思います。

カードコンポーネント -

import React, { Component } from "react"; 

class Card extends Component { 
    render() { 
    const names = this.props.data.names.map(name => { 
     return (
     <div key={name.id}> 
      <div>{name.first_name}</div> 
      //I want the ages to go right here 
      </p> 
     </div> 
    ); 
    }); 

    const ages = this.props.data.ages.map(age => { 
     return (
     <div> 
      <span>{age.number}</span> 
     </div> 
    ); 
    }); 

    return(
     <div className="card"> 
     {people} 
     </div> 
    ) 
    } 
} 

export default Card; 

Answer 1

代わりnameとageのための2つの配列を持っていることのあなたの状態の名前と年齢のためのフィールドを持つpersonオブジェクトの単一の配列を持っている必要があります。

const people= this.props.data.persons.map(person => { 
     return (
     <div key={person.id}> 
      <div>{person.first_name}</div> 
      <div>{person.age} </div> 
      </p> 
     </div> 
    ); 
    }); 

Answer 2

あなたは配列のインデックスであるArray.mapに2つ目のパラメータを追加することができます。これは以下のようにあなたのCard部品のrender方法でマッピングすることができます。だから、これは動作するはずのように見え、namesとageは同じ順序であると仮定：

import React, {Component} from "react"; 

class Card extends Component { 
    render() { 
    const ages = this.props.data.ages 
    const names = this.props.data.names.map((name, idx) => { 
     return (
      <div key={name.id}> 
      <div>{name.first_name}</div> 
      <div> 
       <span>{ages[idx].number}</span> 
      </div> 
      </div> 
     ); 
     }); 

    return (
     <div className="card"> 
     {people} 
     </div> 
    ) 
    } 
} 

export default Card; 

しかし、オブジェクト内の配列を一緒に保つために良いだろうことを指摘しなければならないのではなく、 2つの別々の配列で任意に順序付けられます。 （たとえば、年齢配列をソートすると、名前と年齢が一致しなくなります）。

Answer 3

私はAPIからデータを取得するとき、私は通常、オブジェクトや地図にリストを変換し、そう、店で、それは配列ではありません。

あなたには、いくつかのキーを使用して別の配列をリンクすることができますこの方法。 次の例では、プレゼンテーションのためにクリーナーなのでオブジェクトを使用しますが、純粋なオブジェクトの代わりに個人的にマップを使用します。マップ上で行うことができるので、元の順序を保持できます。 Object.keys（obj）は、objインスタンスのキーをアルファベット順に配列したものです。

store = { 
    users: { 
    'aa1001': { 
     id: 'aa1001', 
     first_name: 'Frank' 
    }, 
    'aa1002': { 
     id: 'aa1002', 
     first_name: 'John' 
    } 
    }, 
    ages: { 
    'aa1001': { 
     userId: 'aa1001', 
     age: 25 
    }, 
    'aa1002': { 
     userId: 'aa1002', 
     age: 30 
    } 
    } 
} 

import React, { Component } from "react"; 

class Card extends Component { 
    render() { 
    const {names, ages} = this.props.data; 
    const people = Object.keys(names).map(nameKey => { 
     return (
     <div key={names[nameKey].id}> 
      <div>{name[nameKey].first_name}</div> 
      <div>ages[nameKey].age</div> 
     </p> 
     </div> 
    ); 
    }); 

    return(
     <div className="card"> 
     {people} 
     </div> 
    ) 
    } 
} 

export default Card; 

ので、あなたが人々をレンダリングするために、年齢と名前を組み合わせたい、私は通常、カスタム関数と応答を変換しませんが、あなたが使用することができます良いツールはnormalizr