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

每当您想在JSX中进行JavaScript内插时，都需要使用花括号。

更改

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

至

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

Answer 3

将地图结果包装在{} 。 您需要执行此操作才能在JSX中呈现元素。 理想情况下，还应该向映射中重新调整的JSX元素添加密钥

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

排序代码

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