lodash map 获取索引键得到了意外的令牌答案

【问题标题】：lodash map get index key got unexpected tokenlodash map 获取索引键得到了意外的令牌
【发布时间】：2017-09-09 01:29:29
【问题描述】：

import { map } from 'lodash';

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

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

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

【问题讨论】：

标签： javascript reactjs underscore.js lodash

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

问题是 {...} 语法被用于对象初始化程序；你是在 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>

【讨论】：