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之后呈现

1 个答案: