为什么我不能 map() 在 JSX 中的这个数组上？答案

【问题标题】：Why can't I map() over this array in JSX?为什么我不能 map() 在 JSX 中的这个数组上？
【发布时间】：2018-08-21 00:51:34
【问题描述】：

我一定是做错了什么。我正在开发一个代码笔，它调用 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

【解决方案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>
));

【讨论】：

是的，我知道这一定很愚蠢。现在可以使用，非常感谢。

【解决方案2】：

按照 Fabian 的建议，使用 () 或 return 并确保在 .map() 内提供 key 属性以避免 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>
        ))}

【讨论】：