Почему я не могу использовать map () для этого массива в JSX?

Question

Я, должно быть, делаю что-то не так Я работаю над кодом, который обращается к конечной точке REST для получения информации о пиве, затем я перебираю его и отображаю некоторую информацию. Ничего особенного, и он еще не завершен с точки зрения красивого CSS и т. Д., Но цикл по моему массиву пива не работает:

https://codepen.io/larryq/pen/yKyMOz

Ключевой раздел находится ниже. Я получаю свои данные из конечной точки и добавляю их в массив beersList, который находится в моем состоянии. Затем в JSX я перебираю его:

       this.state.beerList.map(beer => {
          <div>
            <div className="beer-img">
              <img src={beer.img} height="350" />
            </div>
            <div className="beer-info">
              <h2>{beer.name}</h2>
            </div>
          </div>
        })

.. проблема в том, что на экране ничего не появляется, ни один из <div> s не генерируется.

При отладке я точно знаю, что beerList заполнен данными, которые мне нужны, и в консоли я могу отобразить их и распечатать информацию. Но на экране здесь ничего не происходит и я не могу понять почему?

reactjs jsx

0

jkj2000 13 Мар 2018 в 00:34

Answer 1

Вы должны return JSX внутри map:

this.state.beerList.map(beer => {
  return (
    <div key={beer.id}>
      <div className="beer-img">
        <img src={beer.img} height="350" />
      </div>
      <div className="beer-info">
        <h2>{beer.name}</h2>
      </div>
    </div>
  );
});

Вы также можете вернуть JSX напрямую, используя ():

this.state.beerList.map(beer => (
  <div key={beer.id}>
    <div className="beer-img">
      <img src={beer.img} height="350" />
    </div>
    <div className="beer-info">
      <h2>{beer.name}</h2>
    </div>
  </div>
));

6

Fabian Schultz 18 Мар 2018 в 09:41

Answer 2

Как предлагает Фабиан, используйте () или return и обязательно укажите свойство key внутри .map(), чтобы избежать предупреждения Reactjs , например :

        {this.state.beerList.map(beer => (
          <div key={beer.id}>
            <div className="beer-img">
              <img src={beer.img} height="350" />
            </div>
            <div className="beer-info">
              <h2>{beer.name}</h2>
            </div>
          </div>
        ))}

2

Aaqib 12 Мар 2018 в 22:07

Почему я не могу использовать map () для этого массива в JSX?

2 ответа

Похожие вопросы

Новые вопросы

reactjs