JSX 在 React 中的 .map 之后不渲染答案

【问题标题】：JSX not rendering after .map in ReactJSX 在 React 中的 .map 之后不渲染
【发布时间】：2019-01-18 12:08:54
【问题描述】：

我正在获取一个 JSON 文件并尝试从中呈现数据。当我 console.log 它时一切都很好，但是 JSX 没有被渲染到页面上。我正在使用 forEach 并阅读它应该是 map 但这并不能解决我的问题。这是我的代码：

getPromoDetails(data) {
  data = this.state.data;
  Object.keys(data || {}).map(function(key) {

    console.log("Promo ID: ",data[key].cm_ID)
    console.log("Title: ",data[key].cm_title)
    console.log("State: ",data[key].state)
    console.log("Status: ",data[key].status)
    console.log("Last Modified on: ",data[key].cm_lastmodified)

  return
    <div className="col-xs-12">
      <div className="col-xs-3">
        <img src={`https://link.com/thumbnail_${data[key].cm_ID}.jpg`}/>
      </div>
      <div className="col-xs-9">
        <span className="col-xs-12"> {data[key].cm_title}</span>
        <span>On: {data[key].cm_on}</span>
        <span>State: {data[key].state}</span>
        <span>Status: {data[key].status}</span>
        <span>Last Modified: {data[key].cm_lastmodified}</span>

      </div>
    </div>
  });
}

有什么建议吗？？

【问题讨论】：

这是一个函数吗？
是的 @Tholle ！非常感谢
太棒了！没问题。欢迎使用 Stack Overflow！

标签： reactjs array.prototype.map

【解决方案1】：

您没有返回作为map 结果的数组。您还必须确保 JSX 与 return 语句位于同一行，否则将返回 undefined。

getPromoDetails() {
  const { data } = this.state;

  return Object.keys(data || {}).map(function(key) {
    return (
      <div className="col-xs-12" key={key}>
        <div className="col-xs-3">
          <img src={`https://link.com/thumbnail_${data[key].cm_ID}.jpg`} />
        </div>
        <div className="col-xs-9">
          <span className="col-xs-12"> {data[key].cm_title}</span>
          <span>On: {data[key].cm_on}</span>
          <span>State: {data[key].state}</span>
          <span>Status: {data[key].status}</span>
          <span>Last Modified: {data[key].cm_lastmodified}</span>
        </div>
      </div>
    );
  });
}

【讨论】：