如何循环显示反应列表？

我已经尝试了一切，因为我无法返回列表中的当前项目。当我做控制台日志时，它会在里面显示一个属性，但它不会呈现。我究竟做错了什么？如何循环显示反应列表？

这是我从父组件获取数据：

[ 
    { 
     id: 3, 
     sku: "3008_Brown", 
     parent_sku: "3008", 
     name: "Leonardo", 
     description: "Frame with light & thin Rx lenses, UV & Scratch coatings, and polished edges", 
     product_type_id: 1, 
     gender_id: 3, 
     kids: 0, 
     price: "49.00", 
     retail_price: "200.00", 
     is_active: 1, 
     mfr: "CAC", 
     mfr_model: null, 
     mfr_color: "GREEN", 
     meas_a: 55, 
     meas_b: null, 
     meas_dbl: 17, 
     temple_length: 140, 
     total_frame_width: 142, 
     spring_hinge: null, 
     has_progressive: 0, 
     created_at: null, 
     updated_at: null 
    } 
]

这是代码：

class Result extends Component { 
    constructor(props) { 
    super(props); 

    // set initial state 
    this.state = { 
     datas: '', 
     users: [ 
         {name: "John", id: 120, age: 22, gender: "male"}, 
         {name: "Beth", id: 443, age: 24, gender: "female"}, 
         {name: "Jane", id: 510, age: 19, gender: "female"} 
        ] 
    }; 

    // binding 'this' to class 
    this.displayList = this 
     .displayList 
     .bind(this); 
    } 

    // events we want to happen before it comes up 
    componentWillMount(){ 
    } 
    // events after load 
    componentDidMount(){ 

    } 

    displayList() { 
     if (this.props.dataresults.length > 0) { 
      this.props.dataresults.map(function(user, i){ 
       console.log('user'); 
       console.log(user.description); 
      return <li key={i}>{user.description}</li>; 
     }) 
    } else { 
     return (<h1>No Results </h1>) 
    } 
    } 

    render() { 
     console.log(this.state.users); 
    return (
     <div class="search-results"> 
     <ul> 


       {this.displayList()} 
     </ul> 
     </div> 
    ); 
    } 
}

来源

2017-03-07 Jayswager

你忘了返回。 'return this.props.dataresults.map（' –

）作为一个方面说明，在你的构造函数中'''this.displayList'是没有必要的，只有当你传递 - 不调用函数时，将会在没有'this'的情况下调用它 –

@HardikModha请加上这个作为你的回答 – caisah

正如我在评论中提到的那样，您需要返回结果。

displayList() { 
    if (this.props.dataresults.length > 0) { 
     return this.props.dataresults.map(function(user, i){ 
       console.log('user'); 
       console.log(user.description); 
       return <li key={i}>{user.description}</li>; 
      }) 
    } else { 
     return (<h1>No Results </h1>) 
    } 
}

来源

2017-03-07 18:02:26

您需要返回地图的结果。

displayList() { 
     if (this.props.dataresults.length > 0) { 
      return this.props.dataresults.map(function(user, i){ 
       console.log('user'); 
       console.log(user.description); 
      return <li key={i}>{user.description}</li>; 
     }) 
    } else { 
     return (<h1>No Results </h1>) 
    } 
    }

来源

2017-03-07 17:56:24

如何循环显示反应列表？

回答

相关问题