Оказание array.map() в Реагировании

У меня возникла проблема, когда я пытаюсь использовать массив данных для визуализации элемента <ul>. В приведенном ниже коде console.log работают нормально, но элементы списка не отображаются.

var Main = React.createClass({
  getInitialState: function(){
    return {
      data: dataRecent
    }
  },

  render: function(){
    return (
      <div>
        <ul>
          {
           this.state.data.map(function(item, i){
             console.log('test');
             <li>Test</li>
           })
         }
        </ul>
      </div>
    )
  }
});

ReactDOM.render(<Main />, document.getElementById('app'));

Что я делаю не так? Пожалуйста, не стесняйтесь указывать на то, что не является лучшей практикой. Благодарю.

Ответ 1

Гоша Аринич прав, вы должны вернуть свой элемент <li>. Но, тем не менее, в этом случае вы должны получить неприятное красное предупреждение в консоли браузера

Каждый дочерний элемент в массиве или итераторе должен иметь уникальную "ключевую" опору.

Итак, вам нужно добавить "ключ" в ваш список:

this.state.data.map(function(item, i){
  console.log('test');
  return <li key={i}>Test</li>
})

или отбросьте console.log() и сделайте красивый oneliner, используя функции стрелок es6:

this.state.data.map((item,i) => <li key={i}>Test</li>)

ВАЖНОЕ ОБНОВЛЕНИЕ:

Ответ выше решает текущую проблему, но, как Сергей упомянул в комментариях: использование ключа в зависимости от индекса карты - ПЛОХО, если вы хотите выполнить некоторую фильтрацию и сортировку. В этом случае используйте item.id если id уже существует, или просто создайте для него уникальные идентификаторы.

Ответ 2

Вы не возвращаетесь. Изменить на

this.state.data.map(function(item, i){
  console.log('test');
  return <li>Test</li>;
})

Ответ 3

Вы неявно возвращаетесь к undefined. Вам нужно вернуть элемент.

this.state.data.map(function(item, i){
  console.log('test');
  return <li>Test</li>
})

Ответ 4

let durationBody = duration.map((item, i) => {
      return (
        <option key={i} value={item}>
          {item}
        </option>
      );
    });

Ответ 5

import React, { Component } from 'react';

class Result extends Component {


    render() {

           if(this.props.resultsfood.status=='found'){

            var foodlist = this.props.resultsfood.items.map(name=>{

                   return (


                   <div className="row" key={name.id} >

                  <div className="list-group">   

                  <a href="#" className="list-group-item list-group-item-action disabled">

                  <span className="badge badge-info"><h6> {name.item}</h6></span>
                  <span className="badge badge-danger"><h6> Rs.{name.price}/=</h6></span>

                  </a>
                  <a href="#" className="list-group-item list-group-item-action disabled">
                  <div className="alert alert-dismissible alert-secondary">

                    <strong>{name.description}</strong>  
                    </div>
                  </a>
                <div className="form-group">

                    <label className="col-form-label col-form-label-sm" htmlFor="inputSmall">Quantitiy</label>
                    <input className="form-control form-control-sm" placeholder="unit/kg"  type="text" ref="qty"/>
                    <div> <button type="button" className="btn btn-success"  
                    onClick={()=>{this.props.savelist(name.item,name.price);
                    this.props.pricelist(name.price);
                    this.props.quntylist(this.refs.qty.value);
                    }
                    }>ADD Cart</button>
                        </div>



                  <br/>

                      </div>

                </div>

                </div>

                   )
            })



           }



        return (
<ul>
   {foodlist}
</ul>
        )
    }
}

export default Result;