オブジェクトを子レスポンスコンポーネントに渡す際の問題

Question

私は反応を使用していますが、現在、私はにLocation要素を初期化していますが、Locationはオブジェクトを取得せず、代わりにピクチャー。

スクリプトを修正する方法Location show the name for an object passe from LocationFinderList`？

スプレッドオペレータの問題がありますか？

注：locationsのオブジェクト内の場所は、オブジェクト内の項目としてではなく、オブジェクトのプロパティとして定義されています。

---

{ 
       2643743: { 
        name: "London", 
        country: "GB" 
       }, 
       4119617: { 
        name: "London", 
        country: "US" 
       } 
} 

---

import React, { PropTypes } from 'react'; 
import Location from './Location'; 

const LocationFinderList = ({ locations, onLocationClick }) => (
    <ul> 
     {Object.keys(locations).map((location, index) => 
      <Location 
       key={index} 
       {...location} 
       onClick={() => onLocationClick(location.id)} 
      /> 
     )} 
    </ul> 
); 

export default LocationFinderList; 

---

import React, { PropTypes } from 'react'; 

const Location = ({ onClick, location }) => (
    <li 
     onClick={onClick} 
    > 
     {location} 
    </li> 
) 

export default Location; 

---

Answer 1

あなたがキーを取得する上でマッピングするためにObject.keysを使用しているので結果として、したがって、あなたがオブジェクトを渡したい場合は、あなたが

const LocationFinderList = ({ locations, onLocationClick }) => (
    <ul> 
     {Object.keys(locations).map((location, index) => 
      <Location 
       key={index} 
       {...locations[location]} 
       onClick={() => onLocationClick(location)} 
      /> 
     )} 
    </ul> 
); 

そして

const Location = ({ onClick, name, country}) => (
    <li 
     onClick={onClick} 
    > 
     {name} 
    </li> 
) 

Answer 2

変更 {...場所}にコーディングlocations[location]

の変更のようにそれを渡す必要があります

〜 {... locations [location]}