Как приостановить работу map до выполнения определённых условий пере return?

Question

[Solevoy_2015]

Я получаю fileList с фотографиями от пользователя из input type='file' и через map хочу отрисовать их, но для того чтобы получить url загруженных пользователем картинок я использую FileReader у которого при отработке map readState = 1 и поле result пустое. Грубо говоря мне нужно заморозить map перед return, пока FileReader не создаст url.

[...selectedImages].map((image, index) => {
                            const reader = new FileReader()
                            reader.readAsDataURL(image)
//тут остановить до тех пор пока reader.result === null
                            return (
                                <img src={reader.result} alt="" key={`previewImage:${index}`} />
                            )
                        })

Я естественно могу и иначе сделать, просто интересно, есть ли способы решить задачу. Пишу на React

Answer 1

[Михаил Р.]

Пишу на React

Какой интересный язык.

const [imageUrls, setImageUrls] = useState([]);

async function readAsDataURL(image) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = () => resolve(reader.result);
        reader.onerror = reject;
        reader.readAsDataURL(image);
    });
}

useEffect(() => {
    (async () => {
        try {
            const urlPromises = selectedImages.map(readAsDataURL);
            const urls = await Promise.all(urlPromises);
            setImageUrls(urls);
        } catch (error) {
            console.error(error);
        }
    })();
}, [selectedImages]);

return imageUrls.map((url, index) => <img src={url} alt="" key={`previewImage:${index}`} />);

Comments

[Solevoy_2015]

Ясно же что я имел в виду...

[Михаил Р.]

Solevoy_2015,

Пишу на React

Какой интересный язык.

Ясно же что я имел в виду...

Не сдержался ;)

Вам ответ помог?

[Solevoy_2015]

Да, все отлично. Спасибо большое за помощь, еще бы знать как это работает. Есть возможность объяснить или предоставить ссылку на ресурс?

[Михаил Р.]

Solevoy_2015,

Есть возможность объяснить

Уточните, что именно Вам не понятно?

Если кратко, то:
- FileReader - асинхронный, его нужно дождаться.
- Вы не можете "заморозить" map для ожидания асинхронной операции, однако можно изменить подход к работе с файлами, используя промисы, создав функцию, которая возвращает промис, которая внутри себя дожидается уже FileReader. Затем, вместо того, чтобы сразу отрисовывать изображения, Вы можете сохранить в состоянии массив промисов, каждый из которых будет разрешаться в URL изображения, когда файл будет загружен. Затем, когда все промисы будут разрешены (с помощью Promise.all), Вы можете обновить состояние и отрисовать изображения.
- useEffect для выполнения побочных операций, а т.к. он не может быть асинхронным, то внутри него создаем самовызывающуюся асинхронную функцию, а в ней уже работаем с промисами.

[Solevoy_2015]

Михаил Р., Отлично все объяснили, еще раз спасибо!

Answer 2

[iljaGolubev]

Завернуть FileReader в Promise
как-то так

const readAsDataURL = (image) => {
  const fr= new FileReader();
  return new Promise((resolve, reject) => {
    fr.onerror = () => {  fr.abort();  reject(new Error( 'err msg' ));  };

    fr.onload = () => { resolve(fr.result); };
    fr.readAsDataURL(image)
  });
};


[...selectedImages].map( async (image, index) => {
   const data =  await readAsDataURL(image)
   return (<img src={data} alt="" key={`previewImage:${index}`} />
})

Comments

[Solevoy_2015]

Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

[WbICHA]

Solevoy_2015, потому что это не решение, а непонятно что.

[iljaGolubev]

Solevoy_2015, там скобочки не хватает.
У вас вопрос как "остановить map" или про реакт?
вот реакт

import React from 'react';

export function App(props) {

  const readAsDataURL = (image) => {
    const fr = new FileReader();
    return new Promise((resolve, reject) => {
      fr.onerror = () => { fr.abort(); reject(new Error('err msg')); };

      fr.onload = () => { console.log('fr.DONE'); resolve(fr.result); };
      fr.readAsDataURL(image)
    });
  };


  function map(e) {
    const files = Array.from(e.target.files)
    files.map(async (image, index) => {
      console.log(index)
      const data = await readAsDataURL(image)
      console.log('data')
    })
  }

  return (
    <div className='App'>
      <form >
        <input multiple type="file" onChange={map} />
      </form>
    </div>
  );
}

0
1
fr.DONE
data
fr.DONE
data