Использование Map и Sort для отображения объектов, содержащих URL изображений с временными метками

Question

Я изучаю FireBase и использую реакцию, и сейчас я просто остановился на этом коде:

{photos.map(url => (
        <div key={url} style={card}>
          <img src={url} style={image} />
          <div
            style={{
              margin: '10px',
              display: 'grid',
              gridTemplateColumns: '20px 1fr',
              gridGap: '20px',
              alignItems: 'center',
            }}
          >
            <div
              onClick={() =>
                favoritesURLs.includes(url)
                  ? unfavorite(url)
                  : favorite(url)
              }
            >
              <Icon
                type='star'
                size={20}
                strokeWidth={1}
                fill={favoritesURLs.includes(url)}
              />
            </div>
          </div>
        </div>
      )).sort(photos.timestamp)}

Объект photos выглядит примерно так:

["https://firebasestorage.googleapis.com/v0/b/0e0f89095ff2", 1585587393344, "https://firebasestorage.googleapis.com/v0/b/ad8c81e0798e", 1585587393351, "https://firebasestorage.googleapis.com/v0/b/d42de0a22961", 1585587393369]

Изображения отображаются так же, как отметки времени хахахахахаха Как я могу показать только изображения, используя сортировку по отметке времени?

Answer 1

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

Предполагая, что данные:

const pics = ["https://firebasestorage.googleapis.com/v0/b/0e0f89095ff2", 1585587393344, "https://firebasestorage.googleapis.com/v0/b/ad8c81e0798e", 1585587393351, "https://firebasestorage.googleapis.com/v0/b/d42de0a22961", 1585587393369]

Ваша функция будет выглядеть так:

// grab all the pics urls
const urls = pics.filter((pic, i) => i % 2 === 0);
// grab all the timestamps
const timestamps = pics.filter((pic, i) => i % 2 === 1);

// combine them into an array of photo objects
const photos = urls.reduce(
  (a, c, i) => [...a, { imgUrl: c, timestamp: timestamps[i] }],
  []
);

Результат должен быть:

[
  {imgUrl:"https://firebasestorage.googleapis.com/v0/b/0e0f89095ff2", timestamp: 1585587393344},
  {imgUrl:"https://firebasestorage.googleapis.com/v0/b/ad8c81e0798e", timestamp: 1585587393351},
  {imgUrl:"https://firebasestorage.googleapis.com/v0/b/d42de0a22961", timestamp: 1585587393369}
]

Это должно дать вам объект, который вам нужно отсортировать в соответствии с ответом @ Varooneh.

Answer 2

Массив Photos не имеет ключа с именем [timestamp]. Я думаю, вам нужен javascript объект, подобный этому:

const photos = [
  {
    imgUrl: 'https://firebasestorage.googleapis.com/v0/b/0e0f89095ff2', 
    timespan: '1585587393344'
  },
  {
    imgUrl: 'https://firebasestorage.googleapis.com/v0/b/ad8c81e0798e', 
    timestamp: '1585587393351'
  }
]

На карте вы можете использовать:

{photos.map(item => {
        return
        <div key={item.imgUrl} style={card}>
          <img src={item.imgUrl} style={image} />
          <div
            style={{
              margin: '10px',
              display: 'grid',
              gridTemplateColumns: '20px 1fr',
              gridGap: '20px',
              alignItems: 'center',
            }}
          >
            <div
              onClick={() =>
                favoritesURLs.includes(item.imgUrl)
                  ? unfavorite(item.imgUrl)
                  : favorite(item.imgUrl)
              }
            >
              <Icon
                type='star'
                size={20}
                strokeWidth={1}
                fill={favoritesURLs.includes(item.imgUrl)}
              />
            </div>
          </div>
        </div>
      }).sort(photos.timestamp)}

Для сортировки по свойству перейдите по этой ссылке Javascript Сортировка массива по имуществу

Надеюсь, это вам поможет.