問題與傳遞對象到子反應組件

Question

我正在使用react，目前我需要顯示一個html列表，在LocationFinderList我正在初始化Location元素，但Location沒有得到該對象，而是我只獲得數字屬性，如圖所示圖片。

如何解決我的腳本如此Location show the name for an object passe from LocationFinderList？

傳播運算符可能是一個問題嗎？

備註：在locations中的位置LocationFinderList中的對象被定義爲對象的屬性而不是數組中的項目。

---

{ 
       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映射結束，你就會拿到鑰匙結果，因此，如果你想傳遞的對象，你需要通過它像locations[location]

更改您的代碼

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]}