JSX 在 React 中的 .map 之后不呈现

Question

我正在获取一个 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>
  });
}

有什么建议吗？？

Answer 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>
    );
  });
}

JSX 在 React 中的 .map 之后不呈现

JSX not rendering after .map in React

reactjs

array.prototype.map