React Redux Array.Map Fetch - возвращает успех, когда все файлы успешно - PullRequest
0 голосов
/ 16 мая 2018

У меня есть компонент внутри модального окна, где я могу загрузить несколько файлов. Он должен быть закрыт, когда все файлы уже загружены, или дать мне сообщение, если один из них не смог загрузить .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)
  }
}

В настоящее время модал выгрузки будет закрыт при успешной загрузке одного из файлов.

1 Ответ

0 голосов
/ 16 мая 2018

Прямо сейчас из вашего компонента вы отображаете массив и передаете один файл в сагу для загрузки. И ваша сага отправит действие FILE_UPLOADED, как только оно будет завершено и ваш модальный будет закрыт. Обновите свою сагу, чтобы принять массив файлов. А из саги вы можете отправлять действие только тогда, когда все файлы в массиве загружены.

Вот пример:

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}
...