时间戳

首页 > 解决方案 > React Redux Array.Map Fetch - 当所有文件都成功时返回成功

javascript - React Redux Array.Map Fetch - 当所有文件都成功时返回成功

问题描述

我在模式中有一个组件，我可以在其中上传多个文件，当所有文件都已上传时必须关闭它，或者如果其中一个文件上传失败.eg（文件太大）给我一条消息

组件 - ModalUploadFile.jsx

this.state = { files: [file1, file2, file2] }

单击提交按钮时将调用以下代码

uploadFile = () => {
    this.refs.btn.setAttribute("disabled", "disabled");
    this.state.files.map( function(file) {
        this.props.saveFile(this.props.selected_candidate.id, file)
      }, this
    ) 
}

Sagas.js

function* saveFile(action) {
  try {

    let file = action.file
    let formData = new FormData()
    formData.append("file", file)

    let result = yield fetch(URL, {
      method: "POST",
      credentials: "same-origin",
      body: formData
    }).then(response => response.json()).then(data => {
      return data
    })
    yield put({
      type: actionTypes.FILE_UPLOADED,
      ci: result
    })
    yield put({
      type: actionTypes.CLOSE_MODAL
    })
  } catch (ex) {
    console.log(ex)
  }
}

目前，上传模式将在其中一个文件成功上传时关闭。

标签： javascriptreactjsreduxfetcharray-map

解决方案

现在，您正在从您的组件映射数组并将一个文件传递给 saga 以进行上传。一旦完成，您的 saga 将调度 FILE_UPLOADED 操作，因此您的模式已关闭。更新您的 saga 以接受文件数组。并且从 saga 中，只有当数组中的所有文件都上传时，您才能调度一个动作。

这是一个例子：

function* saveFiles() {
   const results = yield all(action.payload.files.map(id => call(saveFile, file)));
   yield put({ type: FILES_UPLOADED, payload: { results } })
}

function saveFile(file) {// make your fetch call for each file and return result}

推荐阅读