javascript - 如何循环遍历 on React 列表？

Question

我已经尝试了所有方法，无论出于何种原因，我都无法返回列表中的当前项目。当我执行控制台日志时，它显示其中有一个属性，但它不会呈现。我做错了什么？

这是我从父组件获取的数据:

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

Answer 1

您需要返回 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>)
     }
  }