как сопоставить идентификационный ключ между данными в React?

Question

у меня есть 2 массива с объектами

[
  {
    "id": 1,
    "name": "erre"
  },
  {
    "id": 2,
    "name": "kldwer"
  },
  {
    "id": 3,
    "name": "yyerre"
  },
  {
    "id": 4,
    "name": "erereer"
  },
  {
    "id": 5,
    "name": "Rtnsjn"
  },
  {
    "id": 6,
    "name": "Vnngh"
  },
  {
    "id": 7,
    "name": "Scelli"
  },
  {
    "id": 8,
    "name": "Iiin"
  },
  {
    "id": 9,
    "name": "Prulens"
  }
]

а так же массив который обращается к нему через поле Authorid:

[
  {
    "authorId": 1,
    "created": "1850",
    "id": 1,
    "locationId": 1,
    "name": "The ninth wave"
  },
  {
    "authorId": 2,
    "created": "1747",
    "id": 2,
    "locationId": 2,
    "name": "L`Enlévement d`Europe"
  },
  {
    "authorId": 3,
    "created": "1472",
    "id": 3,
    "locationId": 3,
    "name": "Annunciation"
  },
  {
    "authorId": 4,
    "created": "1892",
    "id": 4,
    "locationId": 4,
    "name": "Evening on Karl Johan Street"
  },
  {
    "authorId": 5,
    "created": "1662",
    "id": 5,
    "locationId": 5,
    "name": "Syndics of the Drapers' Guild"
  }]

нужно это для карточки

 {paintings.map((item) => (
        <>
          <div key={item.id} className={style.container__wrapper}>
           <div className = {style.container__illustration}>
            <img
              src={{item.imageUrl}}
              alt={item.name}
            />
            <span
              className={style.container__illustrationInfo} id={item.id}  onMouseEnter={(e) => e.target.setIsActive(!isActive)} onMouseLeave={(e) => setIsActive(!isActive)}
              onClick={(e) => setIsActive(!isActive)}>  
              <h1 className={style.container__name} key={item.id}>{item.name}</h1>
              {!isActive && (
                 <div className={style.container__infoBox}>
                 
                  <h1 className={style.container__infoboxItem}>Author:</h1>            
                  <h1 className={style.container__infoboxItem}>Created:</h1>
                  <h1 className={style.container__infoboxItem}>Location:</h1>
                 </div>
              )
              }

так как к полям Author ,Location можно обратиться через AuthorId и LocationId (из второго массива) я не понимаю как их можно сопоставить

Answer 1

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

Сложность алгоритма через постоянный поиск будет n ^ 2, это значит что если у вас в массиве будет к примеру 100 картин, то в худшем случае вам понадобится 100 ^ 2 = 10000 итераций, чтобы всё отобразить

Сложность алгоритма с помощью словарика равна n * 2, это значит что если у вас в массиве будет к примеру 100 картин, то в худшем случае вам понадобится 100 * 2 = 200 итераций, чтобы всё отобразить

Код:

const authors = [{
    "id": 1,
    "name": "erre"
  },
  {
    "id": 2,
    "name": "kldwer"
  },
  {
    "id": 3,
    "name": "yyerre"
  },
  {
    "id": 4,
    "name": "erereer"
  },
  {
    "id": 5,
    "name": "Rtnsjn"
  },
  {
    "id": 6,
    "name": "Vnngh"
  },
  {
    "id": 7,
    "name": "Scelli"
  },
  {
    "id": 8,
    "name": "Iiin"
  },
  {
    "id": 9,
    "name": "Prulens"
  }
];

const paintings = [{
    "authorId": 1,
    "created": "1850",
    "id": 1,
    "locationId": 1,
    "name": "The ninth wave"
  },
  {
    "authorId": 2,
    "created": "1747",
    "id": 2,
    "locationId": 2,
    "name": "L`Enlévement d`Europe"
  },
  {
    "authorId": 3,
    "created": "1472",
    "id": 3,
    "locationId": 3,
    "name": "Annunciation"
  },
  {
    "authorId": 4,
    "created": "1892",
    "id": 4,
    "locationId": 4,
    "name": "Evening on Karl Johan Street"
  },
  {
    "authorId": 5,
    "created": "1662",
    "id": 5,
    "locationId": 5,
    "name": "Syndics of the Drapers' Guild"
  }
];

const authorsMap = new Map(authors.map(author => [author.id, author]))

for (const painting of paintings) {
  console.log(`Painting name: ${painting.name}\nAuthor name: ${authorsMap.get(painting.authorId).name}`)
}

БЛОГ НА HUSL

как сопоставить идентификационный ключ между данными в React?

Ответы (1 шт):