Блог

У меня возникла проблема с сохранением файлов JSON-изображений в mobx observables следующим образом.

Это мой вызов Axios, в котором возникает проблема:

  @observable images = [];
 @action getAllImages() {
    const payload = {
      "token": getTokenFromLocalStorage
    }

            axios.get(API_BASE_URL   '/user/images', payload)
              .then(function(response) {
                if (response.status >= 200 amp;amp; response.status < 300) {
                  console.log("RESPONSE IMAGE:"   JSON.stringify(response.data.files, null, 2));
     >>               this.images = response.data.files;
                  console.log("IMAGESTORE IN AXIOS "   this.images[0]);
                } else {
                  alert("error getting images");
                }
              })
              .catch(function(error) {
                console.log("DOWNLOAD: "   error);
              });
  }
 

Эта часть this.images = response.data.files; выдает исключение: Cannot set property 'images' of undefined

Вывод приведенной выше строки:

 RESPONSE IMAGE:[
  "img_1612801479594.jpg",
  "img_1612802187709.jpg",
  "img_1612802491363.jpg",
  "img_1612803744426.jpg"
]
 

Почему я не могу присвоить массив с объектами-изображениями этому наблюдаемому? Это кажется мне действительно запутанным.

Это мой серверный сервер Node-JS, который отправляет JSON-ответ:

 router.get("/images", function(req, res) {
  // Sends all available images
  let sendFiles = [];
  let files = fs.readdirSync(imagePath);
  files.forEach(file => {
    if (file.includes("jpg") ||
        file.includes("jpeg") ||
        file.includes("JPEG") ||
        file.includes("png") ||
        file.includes("PNG")) {
      sendFiles.push(file)
    }
  });
  res.send({files: sendFiles});
});
 

когда ваши обработчики функций записи находятся внутри then или catch, у них будет собственный контекст. Для приведенного ниже кода,

 this.images = response.data.files;
 

‘this’ относится к контексту функции ‘then’. В нем не будет «изображений», объявленных в этой функции.

Если вы используете es6, приведенный ниже код будет работать до тех пор, пока вы объявили «изображения»

 axios.get(API_BASE_URL   '/user/images', payload)
      >>        .then((response) => {
                if (response.status >= 200 amp;amp; response.status < 300) {
                  console.log("RESPONSE IMAGE:"   JSON.stringify(response.data.files, null, 2));
     >>               this.images = response.data.files;
                  console.log("IMAGESTORE IN AXIOS "   this.images[0]);
                } else {
                  alert("error getting images");
                }
              })
    >>          .catch((error) => {
                console.log("DOWNLOAD: "   error);
              });