Promise.all не загружает изображения в React для использования в HTML Canvas

Question

Я строю небольшую игру на холсте HTML в React. Для этого мне нужно предварительно загрузить все изображения, прежде чем я начну взаимодействовать с API Canvas. Я загружаю все изображения с помощью Promise.all следующим образом:

import tile from '../assets/images/tile.png';
componentDidMount() {
  this.load();
 }

loadImages(images) {
  return images.map(image => {
    return new Promise(resolve => {
      const image = new Image();

      image.onload = () => {
        this.loadedImages.tile = image; //this.loadedImages is an instance variable
        resolve(image);
      };

      image.src = image;
    });
  });
}

load() {
  Promise.all(this.loadImages([tile]))
    .then(a => console.log(a))
    .catch(e => console.log(e));
 }

Все изображения существуют в исходном каталоге проекта. Я не уверен, используются ли Promises для их загрузки, поскольку они не извлекаются из Интернета. В любом случае, метод Promise.all в load не разрешает все обещания, поэтому он не печатает никаких журналов в thenables / catch. Однако я могу выполнить одно обещание следующим образом:

 loadImage($image) {
  return new Promise(resolve => {
    const image = new Image();

    image.onload = () => {
      this.loadedImages.tile = image;
      resolve(image);
    };

    image.src = $image;
  });
}

load() {
  this.loadImage(tile)
    .then(a => console.log(a)) //prints the image element - a
    .catch(e => console.log(e));
 }

Пожалуйста, кто-нибудь, помогите мне с этим. Спасибо!

Answer 1

      image.src = image;

Это не может работать! И поскольку у вас нет reject во внутреннем обещании, вы не слышите об этой ошибке. В примере с одним изображением вы используете $image для различения guish двух изображений.

Просто переименуйте одну из двух image переменных.

loadImages(images) {
  return images.map(imageFile => {
    return new Promise(resolve => {
      const image = new Image();

      image.onload = () => {
        this.loadedImages.tile = image; //this.loadedImages is an instance variable
        resolve(image);
      };

      image.src = imageFile;
    });
  });
}

Answer 2

У вас нет функции reject(). У вас должна быть одна для отладки таких ошибок.

Кроме того, вы используете две разные переменные с одинаковыми именами (image) в одной и той же области.

Вам требуется один файл изображения, и поэтому вам абсолютно не нужно создавать массив или, тем более, массив Promises.

Наконец, рассмотрите возможность использования синтаксиса async / await. Он понятнее, его легче отлаживать и понимать, а его синтаксис совместим с React.