es2015 Karte unterstützt Array von Objekt nicht?

Question

ein jsbin Erstellt um den Fehler Demo, können Sie den Fehler hier https://jsbin.com/muhuxunome/1/edit

class Hello extends React.Component { 
    render() { 
    const normalizedStats = [ 
    { 
    "name": "Confirmed", 
    "count": 7 
    }, 
    { 
    "name": "Unprocessed", 
    "count": 2 
    }, 
    { 
    "name": "Not Suitable", 
    "count": 9 
    }, 
    { 
    "name": "Shortlisted", 
    "count": 17 
    } 
]; 

    return(
      <div> 
      normalizedStats.map(obj => 
       <li>{obj.name} ({obj.count})</li> 
      ) 
      </div> 
     ) 
    } 
} 

Ich habe Fehler von obj sehen, ist nicht definiert? Ich habe versucht, die Karte von lodash funktioniert, nicht sicher, warum die Karte von es2015 hier einen Fehler hat.

Answer 1

Sie haben vergessen, die "{}"

return (
    <div> 
     {normalizedStats.map((obj, index) => { 
      return <li key={index}>{obj.name} ({obj.count})</li>; 
     })} 
    </div> 
); 

Answer 2

Sie müssen geschweifte Klammern verwenden, wenn Sie JavaScript Interpolation in Ihrem JSX tun wollen.

ändern

normalizedStats.map(obj => 
    <li>{obj.name} ({obj.count})</li> 
) 

zu

{normalizedStats.map(obj => 
    <li>{obj.name} ({obj.count})</li> 
)} 

Answer 3

Wickeln Sie die Karte Ergebnis innerhalb {}. Sie müssen das tun, um Ihre Elemente in JSX zu rendern. sollte idealerweise auch mit Sortier

class Image extends React.Component { 
    render(){ 
    return <img className="center" {...this.props} />; 
    } 
} 

Image.propTypes = { 
    src: React.PropTypes.string.isRequired 
}; 

class Hello extends React.Component { 
    render() { 
    const normalizedStats = [ 
    { 
    "name": "Confirmed", 
    "count": 7 
    }, 
    { 
    "name": "Unprocessed", 
    "count": 2 
    }, 
    { 
    "name": "Not Suitable", 
    "count": 9 
    }, 
    { 
    "name": "Shortlisted", 
    "count": 17 
    } 
]; 
    normalizedStats.sort(function(a, b) {return a.count - b.count}) 
    return(
      <div> 
     {normalizedStats.map((obj) => { 
       return <li key={obj.name}>{obj.name} ({obj.count})</li> 
      } 

      )} 
      </div> 
     ) 
    } 
} 

class App extends React.Component{ 
    constructor(props) { 
    super(props); 
    this.state = { 
     name: 'JSBin' 
    }; 
    } 

    render() { 
    return (<div className="app"> 
     <Hello /> 
     </div>); 
    } 
} 

ReactDOM.render(<App />, document.getElementById('app')); 

JSBIN