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 => {

  const dt = new Date(item.actual);

  const mins = dt.getMinutes();

  return (

    <tr key={item.ID}>

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

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

      <td>{`${dt.getHours()}:${mins < 10 ? '0' : ''}${mins}`}</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>

  )

})}

Answer 3

您可以创建一个Date对象，然后在 Date 对象上使用方法，如下所示：

let theDate = new Date("2019-08-22T23:50:00Z");

console.log(theDate.getHours() + ':' + theDate.getMinutes());

会输出：

0:50