异步中的初始化减少

Question

  const handleFileChange = async (e) => {
        const target = e?.target?.files;
        const attachments = await Array.from(target).reduce(async (acum, file) => {
            file.id = uniqid();
            // const format = file.name.split('.').pop();
            // if (IMAGE_FORMATS.includes(format)) {
            setIsLoading(true);
            if (file.type.startsWith('image/')) {
                const response = await channel.sendImage(file);
                file.src = response.file;
                acum.images.push(file);
            } else {
                const response = await channel.sendFile(file);
                file.src = response.file;
                acum.files.push(file);
            }
            setIsLoading(false);
            return acum;
        }, Promise.resolve({ files: [], images: [] }));
        setFilesList(prev => {
            console.log('files', [...prev, ...attachments.files]);
            return [...prev, ...attachments.files];
        });
        setImagesList(prev => {
            console.log('images', [...prev, ...attachments.images]);
            return [...prev, ...attachments.images];
        });
    };

在上面的代码中，我有以下错误 它看起来是由于我对数组初始化的原因，但是我应该如何解决它？

Answer 1

async 函数返回承诺，这使得使用 .Reduce（）时很难使用，因为您需要等待您的累加器每次迭代获取您的数据。作为替代方案，您可以使用 array.from（） （您可以将其视为使用 .map（）在 ））。这里的想法是，该地图将使用 sendimage / sendfile 触发每个文件的多个异步调用。这些呼叫将在后台并行运行。我们从映射函数返回的价值将是一个承诺，它会在成功完成（一旦解决）成功完成时通知我们。此外，映射函数定义了承诺所解决的问题，在我们的情况下，它是带有 src 属性的新对象：

const isImage = file => file.type.startsWith('image/');
const filePromises = Array.from(target, async file => {
  const response = await (isImage(file) ? channel.sendImage(file) : channel. sendFile(file));
  return {...file, type: file.type, src: response.file};
});

上面 filepromises 是一个承诺的数组（如<代码> async mapper函数隐含地返回承诺）。我们可以使用 等待我们解决的所有承诺。这比执行每个异步调用一个逐一呼叫要快，只有在我们等待之前的完成后才移动到下一个：

setIsLoading(true); // set loading to `true` before we start waiting for our asynchronous work to complete
const fileObjects = await Promise.all(filePromises);
setIsLoading(false); // complete asynchronous loading/waiting

最后， fileObjects 是一个数组，它包含所有对象，都包含文件和图像。我们可以进行一次迭代，将此数组分为单独的数组，一个用于图像，一个用于文件：

const attachments = {files: [], images: []};
for(const fileObj of fileObjects) {
  if(isImage(fileObj)) 
    attachments.images.push(fileObj);
  else
    attachments.files.push(fileObj);
}

Answer 2

减少并不是真正的必要

在这一点上，

const channel = {
 sendImage: async (file) => {return {file}},
 sendFile: async (file) => {return {file}}
 }

const uniqid = () => Math.floor(Math.random() * 100);

const input = {
  target: {
    files: [{
      src: 'src',
      type: 'image/123'
      },
      {
      src: 'src',
      type: 'image/321'
      },
      {
      src: 'src',
      type: '123'
      },
      {
      src: 'src',
      type: '321'
      }]
    }
  }
  
const setIsLoading = () => null;
 

const handleFileChange = async (e) => {
  const target = e?.target?.files;

   setIsLoading(true);
    const attachments = {
      images: [],
      files: [],
    }
        
   await Promise.all(Array.from(target).map((file) => {
      file.id = uniqid();
      return new Promise(async (resolve) => {
        if (file.type.startsWith('image/')) {
            const response = await channel.sendImage(file);
            file.src = response.file;
            attachments.images.push(file);
        } else {
            const response = await channel.sendFile(file);
            file.src = response.file;
            attachments.files.push(file);
        }
        resolve();
      });
    }));
    
  setIsLoading(false)

  return attachments;
};

handleFileChange(input).then(res => console.log(res))