0

我的本地存储中有两个对象，对于每个被点击的文章或播客，每次点击任何一个时，我都会将它与 id 和当前时间添加到它的对象中，我想根据它们被添加的时间在一个历史屏幕中显示它们. 我真的需要帮助，我花了数周时间试图解决这个问题，但无法正确解决

以下是我的 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 显示两个不同的组件，如果先添加文章而不是添加它，或者如果先添加播客然后推送播客组件。我不希望文章在顶部和播客底部，我希望它们按时间/访问顺序混合。

例子：

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} />)
4

1 回答 1

0

您可以参考以下示例，您可以相应地更新数据。

沙盒：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"));
于 2020-04-12T01:26:59.303 回答