映射多维数组中的对象javascript基于列索引反应本机

Question

我有两个历史对象，分别是播客和文章，我想在点击它们时按降序显示在同一屏幕中，

以下是来自 DB 的原始文章和播客的变量

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

这是我的文章历史对象：console.log("dataItem",articlesInHistory)

dataItem Array [
  Object {
    "currentTime": 1585439646,
    "id": "156701",
    Symbol(mobx administration): ObservableObjectAdministration {
      "defaultEnhancer": [Function deepEnhancer],
      "keysAtom": Atom {
        "diffValue": 0,
        "isBeingObserved": true,
        "isPendingUnobservation": false,
        "lastAccessedBy": 26,
        "lowestObserverState": 2,
        "name": "appStore@1.articlesInHistory[..].keys",
        "observers": Set {},
      },
      "name": "appStore@1.articlesInHistory[..]",
      "pendingKeys": Map {
        Symbol(Symbol.toStringTag) => false,
        "hasOwnProperty" => false,
        "toJSON" => false,
      },
      "proxy": [Circular],
      "target": Object {
        "currentTime": 1585439646,
        "id": "156701",
        Symbol(mobx administration): [Circular],
      },
      "values": Map {
        "id" => "156701",
        "currentTime" => 1585439646,
      },
    },
  },
  ,]

和历史播客：console.log("dataItem", podcastsInHistory)

dataItem Array [
  Object {
    "currentTime": 1585439636,
    "id": "4",
    Symbol(mobx administration): ObservableObjectAdministration {
      "defaultEnhancer": [Function deepEnhancer],
      "keysAtom": Atom {
        "diffValue": 0,
        "isBeingObserved": true,
        "isPendingUnobservation": false,
        "lastAccessedBy": 26,
        "lowestObserverState": 2,
        "name": "appStore@1.podcastsInHistory[..].keys",
        "observers": Set {},
      },
      "name": "appStore@1.podcastsInHistory[..]",
      "pendingKeys": Map {
        Symbol(Symbol.toStringTag) => false,
        "hasOwnProperty" => false,
        "toJSON" => false,
      },
      "proxy": [Circular],
      "target": Object {
        "currentTime": 1585439636,
        "id": "4",
        Symbol(mobx administration): [Circular],
      },
      "values": Map {
        "id" => "4",
        "currentTime" => 1585439636,
      },
    },
  },
]

现在我想在条件下使用 currentTime 订购两个组件

例如，如果这个播客是第一个，那么我应该返回

<PodcastList navigate={navigate} podcast={podcast} key={index} />)

或者如果文章是第一然后显示

<SmallArticle key={index} article={article} />

我需要它们混合而不是像顶部和播客底部的文章，我一直在搜索数组排序但无法解决它。

我想要一个基于 currentTime 的条件并使用 id 来识别或匹配对象，谢谢。

Answer 1

由于您不知道数据是文章还是播客（您的对象中没有属性告诉您这一点），您不能将它们放在同一个列表数组中。

知道是否应该呈现文章或 Podcast 组件的唯一方法是基于您正在阅读的列表。

保留两个索引，articleIndex = 0 和 podcastIndex = 0（您可以将其保持在您的状态），并阅读相应列表的实际文章和播客，并比较当前时间。 然后你就会知道要渲染什么组件，并推进相应的列表索引。

在伪代码中：

• 而 articleIndex <articlesList.length && podcastIndex < podcastList.length 做：

  • 如果articlesList[articleIndex].currentTime < podcastList[pocastIndex].currentTime 做：

    • render <SmallArticle article={articlesList[articleIndex]} key ={articleIndex}/> //渲染SmallArticle
    • 文章索引 += 1; //前进索引

  • 否则做：

    • 渲染<PodcastList podcast={podcastList[postcastIndex]} key={podcastIndex} />
    • 播客索引 +=1;

• while 语句结束时，是因为列表中的一个已被完全遍历。 您需要遍历其他的其余部分并呈现尊重组件。

如果您向我展示一些组件代码可以帮助您更详细地编写代码，但我不知道上下文。