Question

尝试创建一个反应但失败的li。错误在map（）附近，我得到错误的i没有定义，为什么？

GridView

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

然后它起作用：

＆＃13;

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

＆＃13;

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

＆＃13;

当我使用Babel's REPL to compile the JSX并意识到我将"this.state.map((item,i) =>"视为字符串时，我很清楚这一点。

Answer 2

试试这个：

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

我没有使用带有ES6的map（）定义

2 个答案: