Как проверить, когда заканчивается выполнение карты в ReactJS

Question

**{data.listArts.items.map((art, index) => {
                    return (
                      <a className="thumbnail" key={index}>
                        <img src={art.ArtURL}/>
                      </a>
                    );})}**

У меня есть этот код для отображения нескольких элементов в пользовательском интерфейсе.data.listArts.items содержит около 100 элементов.

Я хочу вызвать функцию, когда закончится выполнение этой карты, чтобы функция, которую я вызываю, могла работать с отображаемым HTML-кодом в activJS.

Answer 1

Проверка длины массива с индексом

   data.listArts.items.map((art, index) => {
               if(data.listArts.items.length -1 == index){
                      //do what you want to do here may be a flag set here
               }
                return (
                  <a className="thumbnail" key={index}>
                    <img src={art.ArtURL}/>
                  </a>
                );}

     )}

Answer 2

У карты нет обратного вызова (когда он достиг конца массива), но вы всегда можете проверить, достигнут ли последний элемент, и вызвать функцию.

const length = data.listArts.items.length
data.listArts.items.map((art, index) => {
if(index === length -1) {
 /* invoke callback */
}
return (
  <a className="thumbnail" key={index}>
    <img src={art.ArtURL}/>
  </a>
);})