我没有使用带有ES6的map()定义

Question

试图创造一个反应但失败的李.错误是在map()附近,我得到的错误我没有定义,为什么？

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

您的原始代码调用map与item作为第一个参数,和箭头功能以一个参数(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) =>"是一个字符串时,我就清楚了.