React：異なるキーで多次元配列をマップする

Question

多次元配列をdifferentsキーでどのようにマッピングできますか？ これは、例えば配列類似している：「キャッチされない例外TypeError：私は私が手にこの配列をマッピングしようとした場合

var products = [ 
     { 
      id: 1, 
      name: 'John', 
      phones: { 
       sony: 
       { 
        brand: 'sony', 
        model: 'z3' 
       }, 
       samsung: 
       { 
        brand: 'samsung', 
        model: 's7' 
       } 
       } 

     }, 
     { 
      id: 2, 
      name: 'Mike', 
      phones: { 
       sony: 
       { 
        brand: 'sony', 
        model: 'z1' 
       }, 
       nokia: 
       { 
        brand: 'nokia', 
        model: 'n8' 
       } 
       } 

     } 
     ]; 

：（私の元の配列が、私はこれを行う必要がある理由ですAJAXとPHPのmysqlのクエリから取得されます）： （携帯電話のキーなし）この配列では

const List = ({ products, addToCart }) => { 

    return (
    <div className="odds-3"> 
     <div className="odds"> 

     {products.map((product, index) => 
      <div key={index}> 
      <p>{product.id} - {product.name}</p> 
      <ul> 
       {product.phones.map((phone, index) => 

       <li key={index}>{phone.brand} - {phone.model}</li> 

      )} 
      </ul> 
      </div> 
     )} 
     </div> 
    </div> 
); 

} 

、正常に動作します：：product.phones.mapが関数」ではない、あなたの最初の例では

var products = [ 
      { 
       id: 1, 
       name: 'John', 
       phones: 
        [{ 
         brand: 'sony', 
         model: 'z3' 
        }, 
        { 
         brand: 'samsung', 
         model: 's7' 
        } 
        ] 
      }, 
      { 
       id: 2, 
       name: 'Mike', 
       phones: 
        [{ 
         brand: 'sony', 
         model: 'z1' 
        }, 
        { 
         brand: 'nokia', 
         model: 'n8' 
        } 
        ] 
      } 
      ]; 

Answer 1

productsは配列ではないため、map関数は機能しません。代わりに

{Object.keys(product.phones).map((phone, index) => 
<li key={index}>{product.phones[phone].brand} - {product.phones[phone].model}</li> 
)} 

を試してください。

Answer 2

、電話プロパティがですはarrayではないので、map関数を持たない。

phonesはarrayである。

Answer 3

私が言いましたように、productsは配列ではないため、マップ関数を使用することはできません。 here

Answer 4

配列がわずかに働く読み、詳細情報については

import map from 'lodash' 
{map(product, (value, key) => 
... 
)} 

：

あなたがオブジェクトのキー/値を反復処理するために使用することができますlodashライブラリからmap機能を使用することができます、が、 JavaScriptでは異なっています。あなたのケースでは、ドロップインの修正は、オブジェクトの値の上にこのような何かを反復することになります。

{products.map((product, index) => 
    <div key={index}> 
     <p>{product.id} - {product.name}</p> 
     <ul> 
      {Object.values(product.phones).map((phone, index) => 
      <li key={index}>{phone.brand} - {phone.model}</li> 
      )} 
     </ul> 
    </div> 
)} 

一部のブラウザではまだObject.values()をサポートしていないものの、transpilationステップは、このの世話をする必要があります。

インデックスとして、またはイテラブルの内容が変更された場合は、weird rendering bugsが得られるかもしれないので、インデックスをキーとして使用することはお勧めできません。