javascript - React-Redux 应用程序 : How to make that in this field on my page only some part of data displayed?

Question

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

现在数据显示如下:

但我需要它像这样(只有小时和分钟):

在我的案例中如何实现？只是请不要链接，我在我的情况下特别需要帮助。

这是一个显示表格列表的组件(TableData.js):从“ react ”导入 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>
);

airplanes.js( reducer ):

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)
      });
    case "LOAD_DATA_START":
      return Object.assign({}, state, {
        day: action.day
      });
    case "LOAD_DATA_END":
      var newData = action.payload.data[state.shift].filter(x => {
        return (
          x["planeTypeID.code"] &&
          x["planeTypeID.code"].toLowerCase().includes(action.search || state.search)
        );
      });
      return Object.assign({}, state, {
        data: action.payload.data,
        shift: Object.keys(action.payload.data)[0],
        filteredData: searchFilter(state.search, newData)
      });
    default:
      return state;
  }
}

app.js(主要组件):

export function searchFilter(search, data) {
  return data.filter(n => n["planeTypeID.code"].toLowerCase().includes(search));
}

const days = ["23-08-2019", "24-08-2019", "25-08-2019"];

class Root extends React.Component {
  componentDidMount() {
    this.props.onFetchData(days[this.props.propReducer.day]);
  }

  render() {
    const { onFilter, onSetSearch, onFetchData } = this.props;
    const { search, shift, data, filteredData } = this.props.propReducer;

    return (
      <div>
        <Header/>

        <h1>SEARCH FLIGHT</h1>

        <TableSearch value={search} onChange={e => onSetSearch(e.target.value)} 
         onSearch={value => onFilter({ search: value })}onSearch={() => onFilter()}/>

        <div className="buttonShift">
          {data && Object.keys(data).map(n => (
            <button data-shift={n} onClick={e => onFilter({ shift: e.target.dataset.shift })} className={n === shift ? "active" : "noActive"}>{n}</button>
          ))}
        </div>

        <div className="buttonDays">
          {days && days.map((day, i) => (
            <button className="buttonDaysOne" key={day} onClick={() => onFetchData(day)}>{day}
            </button>
          ))}
        </div>

        {data && <TableData data={filteredData} />}

        <Footer/>
      </div>
    );
  }
}

export const ConnectedRoot = connect(
  state => state,
  dispatch => ({
    onFilter: args => dispatch({ type: "RUN_FILTER", ...args }),
    onSetSearch: search => dispatch({ type: "SET_SEARCH", search }),
    onFetchData: day => dispatch(fetchData(day))
  })
)(Root);

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();

然后您可以在组件中显示它们。