ReactJSのネストされた配列オブジェクトのマッピング値

Question

レコードにネストされたアソシエーションの配列を持つ単一のレコードのデータ構造で応答するJSON APIがあります。 APIレスポンスの例は次のようになります。

{ 
    "name":"foo", 
    "bars":[ 
     { 
     "name":"bar1" 
     }, 
     { 
     "name":"bar2" 
     }, 
     { 
     "name":"bar3" 
     } 
    ] 
} 

私は「段落」htmlタグの反応リストに「バー」ノードをマップしようとしていますが、私は何も成功していませんでした。 hereとhereのように "Object.keys.map"を使用しようとしましたが、データの変換権をまだ取得できませんでした。

私は反応する/ jsので、これを達成する方法がわかりません。

Answer 1

// get the <p> virtual DOM element 
const { p } = React.DOM 


// Your data mapped into the <p> element 
// ps :: [ React.DOM ] 
const ps = YourObj.bars.map((b, i) => p({key: i}, b.name)) 
//~> [ <p>bar1</p>, <p>bar2</p>, <p>bar3</p> ] 

ここではpsを使用できます。

Answer 2

barsが応答した場合は配列です。直接反復処理します。配列はmapメソッドを提供します。

render() { 
    return (
     <div> 
      {response.bars.map((item, idx) => (
       <p key={idx}>{item.name}</p> 
      ))} 
     </div> 
    ) 
} 

注：responseデータは、あなたのJSONデータがrecordという名前の属性に保存されている想像APIから

Answer 3

を受けています。

const RecordItem = ({ 
    record 
}) => (
    <div> 
    {record.bars.map((bar, index) => (
     <p key={index}>{bar.name}</p> 
    )} 
    </div> 
) 

// Then, put this wherever: 
<RecordItem record={record} /> 

このトリックを行う必要があります！明らかに、ニーズに合わせて変更してください。