lodash map get index key得到了意外的令牌

Question

import { map } from 'lodash';

render(){
   return(
      {map(new_applicants, (obj,index) => 
         <div key={index}>{index}</div>
      )}
   )
}

这段代码出了什么问题？obj是迭代的单个对象数组,索引是关键.我正在使用lodash.控制台中的错误如下所示.

{map(new_applicants, (obj,index) => 
     |               ^

Answer 1

问题是{...}正在为对象初始化器采用语法; 你是在JSX 之外做的.该语法仅在 JSX部分中有效,例如

<div>{map(...)}</div>

另外,render必须返回一个组件(或null),它不能返回一个数组.所以也许:

return(
  <div>
  {map(new_applicants, (obj,index) =>
    <div key={index}>{index}</div>
  )}
  </div>
)

例:

const map = _.map;

class Foo extends React.Component {
  render() {
    const new_applicants = [1, 2, 3];
    return(
      <div>
      {map(new_applicants, (obj,index) =>
        <div key={index}>{index}</div>
      )}
      </div>
    )
  }
}

ReactDOM.render(
  <Foo />,
  document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>