Problem mit der Weitergabe von Objekt an Kind reagieren Komponent

Question

Ich benutze reagieren, zZ muss ich eine HTML-Liste anzeigen, in LocationFinderList Ich initialisiere Location Elemente, aber Location erhält nicht das Objekt und stattdessen bekomme ich nur numerische Eigenschaft wie in der Bilder.

So beheben Sie mein Skript so Location show the name for an object passe from LocationFinderList`?

Könnte ein Problem mit Spread-Operator sein?

Hinweise: Position in locations Objekt in LocationFinderList sind als Eigenschaften eines Objekts nicht als Elemente in einem Array definiert.

---

{ 
       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

Da Sie Object.keys verwenden zur Karte über die Schlüssel bekommen als Folge und daher, wenn Sie das Objekt zu übergeben wollen, müssen Sie es wie locations[location] Sie

Code ändern

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

zu

Und

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

Answer 2

ändern passieren {...} Standorte

bis {... Standorte [Standort]}