Приложение React-Redux: Как сделать так, чтобы в этом поле на моей странице отображалась только часть данных?

Question

У меня есть немного API. И я беру данные из этого API и отображаю их на странице в виде таблицы списка. Но в поле Время я хочу, чтобы на моей странице отображалась только часть информации.

Теперь данные отображаются так:

Но мне нужно, чтобы это было так (только часы и минуты):

Как это реализовать в моем случае? Просто, пожалуйста, без ссылок, мне нужна помощь, особенно в моей ситуации.

Вот компонент, который отображает список таблиц (TableData.js): импорт 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 (редуктор):

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

Затем вы можете отобразить их в вашем компоненте.

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