es2015地图不支持数组对象？

Question

创建一个jsbin演示了错误，你可以在这里看到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> 
     ) 
    } 
} 

我obj的错误的错误没有定义？我试过lodash的地图工作，不知道为什么地图es2015有错误。

Answer 1

你忘了“{}”

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

Answer 2

你需要，只要你想要做的JavaScript插在你的JSX使用大括号。

变化

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

到

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

Answer 3

包裹内{}地图结果。您需要这样做才能在JSX中呈现您的元素。也非常应该从地图

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

代码添加一键重新调校的JSX元素与排序

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