React-Redux 应用程序：如何在我的页面上的这个字段中只显示部分数据？

Question

我有一些 API。我从这个 API 中获取数据并将其作为列表显示在页面上。但是在时间字段中，我只想在我的页面上显示部分信息。

现在数据显示如下：

但我需要它是这样的（只有几小时和几分钟）：

如何在我的情况下实施它？请不要链接，我需要专门针对我的情况的帮助。

这是一个显示表格列表的组件（TableData.js）： import React from "react";

export default ({ data }) => (

    <div className="tableContainer">

  <table className="table">

    <thead>

      <tr>

        <th>Terminal</th>

        <th>Gate</th>

        <th>Time</th>

        <th>Destination</th>

        <th>Airline</th>

        <th>Flight</th>

        <th>Status</th>

      </tr>

    </thead>

    <tbody>

      {data.map(item => (

        <tr key={item.ID}>

          <td>{item.term}</td>

          <td>{item.gateNo}</td>

          <td>{item.actual}</td>

          <td>

            {item["airportToID.city_en"]

              ? item["airportToID.city_en"]

              : item["airportFromID.city_en"]}

          </td>

        <td>{item.airline.en.name}</td>

          <td>{item["planeTypeID.code"]}</td>

          <td>{item.status}</td>

        </tr>

      ))}

    </tbody>

  </table>

  </div>

);

飞机.js（减速机）：

import { searchFilter } from "../components/app";

export function reducer(state = {}, action) {

  switch (action.type) {

    case "SET_SHIFT":

      return Object.assign({}, state, {

        shift: action.shift

      });

    case "SET_SEARCH":

      return Object.assign({}, state, {

        search: action.search.toLowerCase()

      });

    case "RUN_FILTER":

      var newData = state.data[action.shift || state.shift].filter(x => {

        return (

          x["planeTypeID.code"].toLowerCase().includes(action.search || state.search)

        );

      });

      return Object.assign({}, state, {

        shift: action.shift || state.shift,

        search: action.search || state.search,

        filteredData: searchFilter(state.search, newData)

      });

Answer 1

你可以做这样的事情：-const date = new Date(<date coming from API response>); // new Date("2019-08-22T23:50:00Z")const hours = date.getHours();const minutes = date.getMinutes();然后你可以在你的组件中显示它们。

Answer 2

这只是在渲染之前格式化日期值的问题，您不想更改任何减速器代码，例如const hours = `${dt.getHours()}:${dt.getMinutes()}`;这将使本地时间依赖于浏览器时区，即const dt = new Date('2019-11-11T11:43:18.026Z');console.log(`${dt.getHours()}:${dt.getMinutes()}`); // 22:43 if in Australia (UTC+11)这是TableData.js您需要进行的更改：{data.map(item => {&nbsp; const dt = new Date(item.actual);&nbsp; const mins = dt.getMinutes();&nbsp; return (&nbsp; &nbsp; <tr key={item.ID}>&nbsp; &nbsp; &nbsp; <td>{item.term}</td>&nbsp; &nbsp; &nbsp; <td>{item.gateNo}</td>&nbsp; &nbsp; &nbsp; <td>{`${dt.getHours()}:${mins < 10 ? '0' : ''}${mins}`}</td>&nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; {item["airportToID.city_en"]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ? item["airportToID.city_en"]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : item["airportFromID.city_en"]}&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; <td>{item.airline.en.name}</td>&nbsp; &nbsp; &nbsp; <td>{item["planeTypeID.code"]}</td>&nbsp; &nbsp; &nbsp; <td>{item.status}</td>&nbsp; &nbsp; </tr>&nbsp; )})}

Answer 3

您可以创建一个Date对象，然后在 Date 对象上使用方法，如下所示：let theDate = new Date("2019-08-22T23:50:00Z");console.log(theDate.getHours() + ':' + theDate.getMinutes());会输出：0:50