Reagieren staatenlos Komponente in dem Kartenfunktion ist nicht

Question

Rückkehr ich staatenlos Komponentenform Helfer haben, die wie folgt aussieht:

import React from 'react'; 

export default(props) => { 
    var { attr, fieldAttribute } = props; 
    var label = attr.label; 
    var val = fieldAttribute.value; 
    var keys = []; 

    if(typeof val === 'object'){ 
     keys = Object.keys(val); 
    } 

    return (
     <div className="form-group"> 
      <label className="col-sm-2 control-label">{label}</label> 
      <div className="col-sm-10"> 
       {(() => { 
        if(typeof val === 'object'){ 
         keys.map(function(k){ 
          return (
           <p className="form-control-static"><span className="label label-default label-fixed">{k}</span> {val[k]}</p> 
          ) 
         }); 
        } 
        else{ 
         return (
          <p className="form-control-static">{val}</p> 
         ) 
        } 
       })()} 
      </div> 
     </div> 
    ) 
} 

Die Daten in ‚val‘ entweder ein String oder ein JSON-Objekt (validiert). Mein Problem ist mit der keys.map() ... es gibt aus irgendeinem Grund nichts zurück.

Daten in ‚val‘ in diesem Fall wie folgt aussehen:

{ 
    foo: 'some value of foo', 
    bar: 'some value of bar 
} 

ich viele verschiedene Möglichkeiten iterieren ‚val‘ zu keinem Erfolg versucht habe. Was fehlt mir hier?

Danke.

Answer 1

Versuchen return Anweisung vor keys.map hinzufügen, da Sie resultieren aus Funktion zurückgeben müssen., Ohne return Ihre Funktion gibt undefined und das ist, warum Sie

return keys.map(function(k){ 
    .. 
});