React 应用程序在多个异步图像下载时重新加载答案

【问题标题】：React app reloads on multiple async image downloadsReact 应用程序在多个异步图像下载时重新加载
【发布时间】：2019-01-19 01:51:11
【问题描述】：

在节点中运行一个从 create-react-app 创建的 react 应用程序，我有一个代理节点服务器正在运行，我有一个 API 设置来从 azure blob 存储下载图像。问题是每当我从 react 中连续多次调用 /api/downloadimage 时，页面都会重新加载，就好像 react 放弃了渲染并丢失了应用程序的状态一样。图像确实会下载，但应用程序会刷新。当我只打一次电话时，问题不会发生。

Nodemon 正在运行 server.js。尝试告诉 nodemon 忽略对图像下载到的目录的更改，似乎没有效果。

节点内：

app.get('/api/downloadplateimage', function(req, res, next) {
  const plateName = req.query.name;
  downloadPlate(plateName)
    .then(response => {
        res.json(response);
    }).catch(error => {
        res.json({ success: false });
    });
});

const downloadPlate = (blobName) => {
  return new Promise((resolve, reject) => {
    blobService.getBlobToLocalFile(platesContainer, blobName, imagesDir + '/plates/' + blobName, err => {
        if (err) {
            reject(err);
        } else {
            resolve({ success: true });
        }
    });
  });
};

反应内：

componentDidMount() {
  Promise.all([
    this._downloadImage('<guid>.jpeg'),
    this._downloadImage('<guid>.jpeg')
  ]).then(res => {
    console.log('fetched images');
  });
}

_downloadImage = (imageName) => {
  return fetch(`/api/downloadplateimage?name=${imageName}`)
    .then(r => r.json())
    .then(body => {
      let imageAvailable = false;
      if (body.success) {
        imageAvailable = true;
      }
      ...
      this.setState({imageAvailable});
  });
}

【问题讨论】：

当您说“页面重新加载”时，您的意思是像实际的页面加载吗？（就像你按 F5 一样）
这很有趣，你能在没有 fetch 的情况下重现它吗？我的意思是做一个Promise.All，但只是为每个人返回一个新的承诺
这很有趣，我会看的。向上
对了，你不应该在this.setState({imageAvailable});之后返回响应吗？
与您的问题无关，但如果您没有返回任何内容，那么您将在Promise.all 中获得undefined

标签： node.js reactjs asynchronous fetch azure-blob-storage

【解决方案1】：

最终放弃了下载 blob 并改用 Azure 的 URL 来获取 img src(s)。

【讨论】：