它不是在ES6中使用map()定义的

Question

尝试在react中创建一个li，但失败。错误是在map()附近，我得到的错误I没有定义，为什么?

const TodoItems = React.creatClass({
  getInitialState() {
    return {
      items : [
        {id:1,name:"Gym"},
        {id:2,name:"Jump"},
        {id:3,name:"Racing"}
      ] 
    }
  },
  renderItem(){
    return(
      <ul>
      this.state.items.map(item,i => 
        <li key={i}>item.name</li>
      )
      </ul>
    ) 
  },
  render(){
    return (
      <renderItem />
    )
  }
})

Answer 1

当您有多个箭头函数参数时，您需要将()放在它们周围。所以:

this.state.items.map((item,i) => 
// ------------------^------^
    <li key={i}>item.name</li>
)

您的原始代码以item作为其第一个参数调用map，并以单个参数(i)作为其第二个参数的箭头函数。

你还需要把item.name放在{} 和把map的调用放在{}:

renderItem(){
  return(
    <ul>
    {this.state.items.map((item,i) => 
      <li key={i}>{item.name}</li>
    )}
    </ul>
  ) 

const { Component } = React;
const { render } = ReactDOM;
const TodoItems = React.createClass({
  getInitialState() {
    return {
      items : [
        {id:1,name:"Gym"},
        {id:2,name:"Jump"},
        {id:3,name:"Racing"}
      ] 
    }
  },
  renderItem(){
    return(
      <ul>
      {this.state.items.map((item,i) => 
        <li key={i}>{item.name}</li>
      )}
      </ul>
    ) 
  },
  render(){
    return this.renderItem();
  }
});
    
render(<TodoItems /> , document.getElementById('items'));

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

当我使用Babel的REPL编译JSX并意识到我将"this.state.map((item,i) =>"视为字符串时，这对我来说变得清晰起来。

Answer 2

try this:

renderItem(){
        return(
          <ul>
          {this.state.items.map((item,i) => {
            return(
             <li key={i}>item.name</li>);
          })}
          </ul>
        )