Я пытаюсь получить продолжительность видео непосредственно перед обновлением списка видео, где URL-адреса также будут получены с сервера.

Question

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

Было бы очень полезно, если бы кто-нибудь помог мне выяснить, где я делаю ошибку или какие-либо другие альтернативные точки зрения.

<div id="dummy"></div>

// this is a global variable
let videoDurations = [];

//inside class
componentDidMount() {
  let url = "www.xyz.mp4"
  axios.get(url).then((data) => {
    let videos = data.data;
    videos.forEach((video) => {
      let element = documentgetElementById("dummy");
      let child = document.createElement("video");
      child.addEventListener("loadedmetadata", () => {
        videoDurations.push({
          id: video['id'],
          duration: child.duration
        })
      });
      element.appendChildren(child);
    })
  })
}