Wie kann ich eine Liste von on react durchlaufen?

Question

Ich habe alles aus welchem ​​Grund auch immer versucht Ich kann das aktuelle Element in einer Liste nicht zurückgeben. Wenn ich das Protokoll logge, zeigt es eine Eigenschaft darin, aber es wird nicht gerendert. Was mache ich falsch?

Dies sind die Daten Ich bin von der übergeordneten Komponente bekommen:

[ 
    { 
     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 
    } 
] 

Dies ist der Code:

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

Answer 1

Wie ich im Kommentar erwähnt habe, müssen Sie das Ergebnis zurückgeben.

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

Answer 2

Sie müssen das Ergebnis Ihrer Karte zurückzukehren.