ReactJS: 无法对对象数组进行映射

Question

为什么我不能通过对象数组进行映射？我以前使用过这个map方法，但在此组件中似乎无法正常工作。有任何想法是出了什么问题吗？

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

- Deke

---

你没有返回任何东西。 - Andrew Li

谢谢。我还有一个问题-你知道在React的map函数中何时写return和何时不写吗？我以前使用过这个map而没有返回值，也能正常工作。 - Deke

我认为你可能混淆了语法。使用 Array#map 时，你总是需要返回值，否则你就用错了（最终会得到一个未定义的数组）。当你编写像 () => something 这样的箭头函数时，你是隐式返回而不需要关键字。当你编写 () => { something } 时，你需要显式地编写 return，因为你创建了一个块。但要注意不要试图返回对象字面量，这些需要括号。 - Andrew Li

map 不是 React 的函数，它是 JavaScript 数组的函数。 - Marson Mao

是的，我对语法感到困惑。谢谢。参考：https://stackoverflow.com/questions/45189925/map-function-does-not-return-anything-in-reactjs - Deke

https://stackoverflow.com/a/77247773/4393351 - undefined

Answer 1

变更

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

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

不使用 return

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

返回值

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

如果你的代码只有一行，并且你的.map返回值，那么你不需要返回(或{。请看下面的代码：

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

- Hemadri Dasari

Answer 2

您在 map 回调函数中使用的语法略有不正确，导致 map 函数没有返回任何内容。请考虑按照以下方式修改您的 render() 方法：

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

或者，您可以使用以下语法，它是上面所示内容的简写等效形式：

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

- Dacre Denny

Answer 3

你需要进行传统的return或者移除花括号并进行隐式返回，格式为(value) => newvalue。

- SeanB

---

我分心了太久，同时请听一下Hemadri Dasari的建议 - SeanB