在React中，JSX不会在.map之后呈现(JSX not rendering after .map in React)

我正在获取JSON文件并尝试从中呈现数据。 当我调试它时，一切都显示出来很好。但是JSX没有呈现给页面。 我正在使用forEach并读取它应该是地图，但这不能解决我的问题。 这是我的代码：

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>
  });
}
 
 任何建议？ 
I am fetching a JSON file and trying to render the data from it. Everything shows up great when I console.log it but the JSX is not being rendered to the page. I was using forEach and read that it should be map instead but that doesn't fix my problem. Here's my code: 
 
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>
  });
}
 
Any advice?? 
                
最满意答案
                
                    
                        
 您没有返回作为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>
    );
  });
}
You are not returning the array that is the result of the map. You also have to make sure the JSX is on the same line as the return statement, or undefined will be returned.
 
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>
    );
  });
}