gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 20:30:38 27 4
gpt4 key购买 nike

我在模态中有一个组件,我可以在其中上传多个文件,当所有文件都已上传时必须关闭它,或者如果其中一个文件上传失败给我一条消息。例如(文件太大)

组件 - ModalUploadFile.jsx

this.state = {
文件:[文件 1、文件 2、文件 2]
}

点击提交按钮时会调用以下代码

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

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

最佳答案

现在,您正在从您的组件映射数组并将一个文件向下传递到 saga 以进行上传。一旦完成,您的 saga 将发送 FILE_UPLOADED 操作,因此您的模态将关闭。更新您的传奇以接受文件数组。从 saga 中,只有当数组中的所有文件都已上传时,您才能分派(dispatch)一个 Action 。

这是一个例子:

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}

关于javascript - React Redux Array.Map Fetch - 当所有文件都成功时返回成功,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50371636/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com