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

Question

import { map } from 'lodash';

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

这段代码有什么问题？ obj 是被迭代的单个对象数组，index 是键。我正在使用 lodash。错误在控制台中看起来像这样。

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

Answer 1

这样写，{}当你是运行 html元素里面的js code时需要：

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

Answer 2

问题是 {...} 语法被用于对象初始值设定项；你在 JSX 之外这样做。该语法仅在 JSX 部分有效，例如

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

此外，render 必须 return 一个组件（或 null），它不能 return 一个数组。所以也许：

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>

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

lodash map get index key got unexpected token

javascript

underscore.js

lodash

reactjs