如何限制表头在地图功能中显示一次？答案

【问题标题】：How to restrict Table Header to display once in map function?如何限制表头在地图功能中显示一次？
【发布时间】：2020-06-26 17:00:52
【问题描述】：

我有一个状态数据存储，需要使用 React 在 UI 中以表格格式显示。我正在使用地图功能来显示数据。我能够显示数据，但在每行之后显示标题，因为它们在循环中迭代。

请告诉我如何以表格格式显示输出，而标题只显示一次？

React 中的返回方法代码：-

return (
      <div>
        <br />
        <input
          type="submit"
          class="btn btn-info btn-sm"
          value="Create Itinerary"
          onClick={this.callItinAPI}
        />
        <br />
        <br />

        {this.state.ItinData.map((item) => (
          <div>
            <table id="DisplayRequest">
              <tr>
                <th>TripName</th>
                <th>Booking ID</th>
                <th>Start Date</th>
                <th>End Date</th>
              </tr>

              <tr>
                <td>{item.Itinerary.TripName._text}</td>
                <td>{item.Itinerary.Bookings.Booking.RecordLocator._text}</td>
                <td>{item.Itinerary.StartDateLocal._text}</td>
                <td>{item.Itinerary.EndDateLocal._text}</td>
              </tr>
            </table>
          </div>
        ))}
      </div>
    );

预期输出：- 表头仅显示一次，后跟所有数据行

【问题讨论】：

标签： reactjs html-table

【解决方案1】：

您只需要从循环中提取标题：

<div>
  {this.state.ItinData.length > 0 ? (
    <table id={'DisplayRequest'}>
      <tr>
        <th>TripName</th>
        <th>Booking ID</th>
        <th>Start Date</th>
        <th>End Date</th>
      </tr>
      {this.state.ItinData.map((item) => (
        <tr>
          <td>{item.Itinerary.TripName._text}</td>
          <td>{item.Itinerary.Bookings.Booking.RecordLocator._text}</td>
          <td>{item.Itinerary.StartDateLocal._text}</td>
          <td>{item.Itinerary.EndDateLocal._text}</td>
        </tr>
      ))}
    </table>;
  ) : null}
</div>

【讨论】：

表格根据创建行程事件显示。如果我从循环中提取，它将在没有事件的情况下可见。请帮忙。
它解决了，但我看到默认 0 正在显示。怎么隐藏？
@aquinq- 问题已解决，但我看到虚拟值显示为 0
好吧，也许三元不够明确，你可以试试这个新的编辑。

【解决方案2】：

return (
    <div>
      <br />
      <input
        type="submit"
        class="btn btn-info btn-sm"
        value="Create Itinerary"
        onClick={this.callItinAPI}
      />
      <br />
      <br />
        <div>
          <table id="DisplayRequest">
            <tr>
              <th>TripName</th>
              <th>Booking ID</th>
              <th>Start Date</th>
              <th>End Date</th>
            </tr>
            {this.state.ItinData.map((item) => (

              <tr>
                <td>{item.Itinerary.TripName._text}</td>
                <td>{item.Itinerary.Bookings.Booking.RecordLocator._text}</td>
                <td>{item.Itinerary.StartDateLocal._text}</td>
                <td>{item.Itinerary.EndDateLocal._text}</td>
              </tr>
            ))}
          </table>
        </div>
    </div>
  );

只需将 td 移出循环

【讨论】：

【解决方案3】：

您的代码的问题是，您将表头放在循环本身中，这是错误的。试试这样的：

{
    ( this.state.ItinData.length > 0 )  // conditional rendering if data exist
    ?
    <table id={'DisplayRequest'}>
        <tr>
            <th>TripName</th>
            <th>Booking ID</th>
            <th>Start Date</th>
            <th>End Date</th>
        </tr>
        // Use the map() function to iterate the array and display the table body here
        {this.state.ItinData.map((item) => (
        <tr>
          <td>{item.Itinerary.TripName._text}</td>
          <td>{item.Itinerary.Bookings.Booking.RecordLocator._text}</td>
          <td>{item.Itinerary.StartDateLocal._text}</td>
          <td>{item.Itinerary.EndDateLocal._text}</td>
        </tr>
      ))}
    </table>
    null
}

【讨论】：