Рендеринг array.map () в React

У меня проблема, когда я пытаюсь использовать массив данных для рендеринга<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')); 

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

Ответы на вопрос(5)

Решение Вопроса

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

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

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

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

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

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

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

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

 Sergey Podgornyy28 янв. 2019 г., 11:34
key должен быть уникальным. Ваш код вызовет ошибку после сортировкиthis.state.data, какkey всегда зависит от индекса в массиве
 informer28 авг. 2017 г., 12:53
Когда я добавляю этот набор <li> в <ul>. Я все еще получаю то же самое Красное противное Предупреждение в консоли. Как избавиться от того же?
 Dmitry Birin08 сент. 2017 г., 23:17
Привет! Вам все еще нужна помощь? Это то же самое«Каждый дочерний элемент в массиве или итераторе должен иметь уникальную« ключевую »опору» неприятное сообщение?
 Dmitry Birin29 янв. 2019 г., 17:57
@SergeyPodgornyy полностью согласен, написал это давно. Обновил ответ. Спасибо за продолжение!
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;
 Grant Miller08 июн. 2018 г., 03:53
Попробуйте добавить некоторый контекст в ваш код.
let durationBody = duration.map((item, i) => {
      return (
        <option key={i} value={item}>
          {item}
        </option>
      );
    });
 Suraj Rao28 янв. 2019 г., 11:31
Добро пожаловать в переполнение стека! Спасибо за этот фрагмент кода, который может оказать некоторую ограниченную, немедленную помощь.правильное объяснение значительно улучшит его долгосрочную ценность показываяЗачем Это хорошее решение проблемы, и оно сделает его более полезным для будущих читателей с другими, похожими вопросами. пожалуйстаредактировать Ваш ответ, чтобы добавить некоторые объяснения, в том числе предположения, которые вы сделали.

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

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

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

this.state.data.map(function(item, i){
  console.log('test');
  return <li>Test</li>;
})
 dst3p29 янв. 2019 г., 16:42
Это была моя проблема. Спасибо!

Ваш ответ на вопрос