Как мне сопоставить массив из двух объектов в javascript на основе столбца currentTime (время его нажатия) - PullRequest
Новая
       4

Как мне сопоставить массив из двух объектов в javascript на основе столбца currentTime (время его нажатия)

0 голосов
/ 12 апреля 2020

У меня есть два объекта в моем локальном хранилище, для каждой статьи или подкаста, на которые нажимают, каждый раз, когда нажимается, я добавляю его с идентификатором и текущим временем к его объекту, я хочу показать их на одном экране истории в зависимости от времени они были добавлены. я действительно нуждаюсь в помощи, я потратил недели, пытаясь решить эту проблему, но не смог сделать это правильно

ниже находятся объекты в моем localStorage

var { articlesInHistory, podcastsInHistory } = this.props.stores.appStore;

И ниже является структурой 

Array [

  articlesInHistory {
    "currentTime": 1585439646,
    "id": "156701",
    "currentTime": 15854396345,
    "id": "156201",
},

podcastsInHistory {
    "currentTime": 15854234,
    "id": "4",
    "currentTime": 15854394543,
    "id": "34",
}
]

А вот исходные объекты из базы данных

var { articles, podcasts } = this.props.stores.appStore;

, которые должны быть отображены ниже Статьи <PodcastList navigate={navigate} podcast={podcast} key={id} />)

Подкасты <SmallArticle key={id} article={article} />

Я хочу показать два разных компонента на основе столбца currentTime ORDER, если статья была добавлена ​​раньше, чем ее добавление, или если подкаст был добавлен первым, а затем компонент подкаста pu sh. мне не нужны статьи сверху и снизу подкаста, я хочу, чтобы они смешивались во времени / порядке посещения.

Пример: 

if articlesInHistory.time >  podcastsInHistory.time
  data.push(<SmallArticle key={id} article={article} />)
else if podcastsInHistory.time >  articlesInHistory.time
  data.push(<PodcastList key={id} article={article} />)

1 Ответ

0 голосов
/ 12 апреля 2020

Вы можете обратиться к приведенному ниже образцу, Вы можете соответствующим образом обновить данные.

Песочница: https://codesandbox.io/s/articlepodcast-wd2rv

import ReactDOM from "react-dom";
import React, { useMemo, useState } from "react";
import "./app.css";

function Todo(props) {
  const [state, setState] = useState({
    articlesInHistory: [
      {
        currentTime: 1585439646,
        title: "Article1",
        id: "156701"
      }
    ],
    podcastsInHistory: [
      {
        currentTime: 15854234,
        title: "podcast 2",
        id: "34"
      },
      {
        currentTime: 15854234,
        title: "podcast 1",
        id: "33"
      }
    ]
  });
  const mappedData = useMemo(
    () =>
      []
        .concat(
          state.articlesInHistory.map(x => {
            x.type = "article";
            return x;
          })
        )
        .concat(
          state.podcastsInHistory.map(x => {
            x.type = "podcasts";
            return x;
          })
        )
        .sort((item1, item2) => item1.currentTime - item2.currentTime),
    [state.articlesInHistory, state.podcastsInHistory]
  );

  return (
    <div>
      {mappedData.map(item => {
        if (item.type === "article") return <Article data={item} />;
        return <Podcast data={item} />;
      })}
    </div>
  );
}
function Article({ data }) {
  return (
    <div className="article">
      <h1>{data.title}</h1>
    </div>
  );
}
function Podcast({ data }) {
  return (
    <div className="podcast">
      <h1>{data.title}</h1>
    </div>
  );
}

ReactDOM.render(<Todo />, document.getElementById("root"));
...