javascript - ReactJS:无法通过对象数组进行映射

标签 javascript reactjs

<分区>

为什么我无法通过对象数组进行映射。我以前使用过这张 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

最佳答案

改变

   {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 返回,那么您不需要返回 ({。请看下面的代码:

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

关于javascript - ReactJS:无法通过对象数组进行映射,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53919067/

相关文章:

JavaScript 推特不工作

javascript - 如何检查样式组件内的状态?

javascript - window.postMessage 在 React 中没有 setTimeOut 的情况下无法在 componentDidMount 中工作

javascript - React-Native-如何根据特定键值以展开格式打印此对象数组数组?

javascript - 字体大小自动调整以适合

javascript - 在React/Flux中处理计时器

php - 用户登录后,js文件包含php

javascript - 如何在没有 cookie 的情况下保存输入值

javascript - 如何用react js实现分享到twitter

javascript - Redux 表单 - 您必须将 handleSubmit() 传递给 onSubmit 函数或将 onSubmit 作为 Prop 传递