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>
)

示例：

＆＃13;

＆＃13;

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")
);

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这样写，{}在js code内html元素内运行时需要{：1}}：

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