ReactJS：无法映射对象数组

Question

为什么我无法映射对象数组。我以前使用过这个地图，但它似乎在这个组件中不起作用。知道出了什么问题吗？

import React, { Component } from "react";

class Home extends Component {

    constructor(props) {
      super(props);
      this.state = {
         people: [
           {name:"a", age: 21}, 
           {name:"b", age: 22}, 
           {name:"c", age: 23}
         ]
       }
      this.clickListnerHandler = this.clickListnerHandler.bind(this)
     }

     clickListnerHandler(e){
       console.log(this.state.people)
     }

   render(){
     return (
       <div>
           {this.state.people.map((detail, index) => 
              {detail.name}
           )}
         <button
            onClick={this.clickListnerHandler}
            type="button" >Click on me</button>
       </div> 
      )
    }
  }

 export default Home

Answer 1

改变

   {this.state.people.map((detail, index) => 
          {detail.name}
       )}

到

现在有两种使用 .map 的方法，即使用 return 和不使用 return。当您的代码在 .map 函数内是多行时，您应该使用 ( 或 {

不退货

  {this.state.people.map(detail=> (
           detail.name
       ))}

有返回

   {this.state.people.map(detail=> {
           return detail.name
       })}

或者，如果它是一行代码，其中.map返回，那么您不需要 return(或{。请看一下下面的代码：

    {this.state.people.map(detail=> detail.name)}