如何遍历on响应列表？

Question

I've tried everything for what ever reason I can't return the current item in a list. when I do console log it shows theres a property inside of it but it does not render. What am I doing wrong?

This is the data I'm getting from the parent component:

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

This is the 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

You need to return the result of your map.

  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

As I mentioned in the comment, you need to return the result.

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