объекты карты в многомерном массиве javascript реагируют нативно на основе индекса столбца - PullRequest
Новая
       19

объекты карты в многомерном массиве javascript реагируют нативно на основе индекса столбца

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

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

Вот переменные исходной статьи и подкаста из 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 и использование идентификатора для идентификации или сопоставления объектов благодаря.

1 Ответ

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

Поскольку по данным вы не знаете, является ли это статьей или подкастом (в ваших объектах нет атрибута, который говорит вам об этом), вы не можете поместить их в один и тот же список-массив.

Единственный способ узнать, следует ли отображать компонент Article или Podcast, основан на том, какой список вы читаете.

Сохраните два индекса: articleIndex = 0 и podcastIndex = 0 (вы можете сохранить это в своем состоянии), прочитайте актуальную статью и подкаст для соответствующего списка и сравните текущее время. Затем вы будете знать, какой компонент визуализировать, и продвинете соответствующий индекс списка.

В псевдокоде:

  • , в то время как articleIndex

    • если articleList [articleIndex] .currentTime

      • render <SmallArticle article={articlesList[articleIndex]} key ={articleIndex}/> // render SmallArticle
      • articleIndex + = 1; // предварительный индекс

    • еще сделать:

      • рендер <PodcastList podcast={podcastList[postcastIndex]} key={podcastIndex} />
      • podcastIndex + = 1;

  • после завершения оператора while, потому что один из списков был полностью пройден. Вам нужно пройти через остальную часть и визуализировать компонент уважения.

Если вы покажете мне некоторые из ваших компонентов, код может помочь вам с кодом более подробно, но я не знаю контекст.

...