问题与传递对象到子反应组件

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