React Context Reducer Dispatches在调用时覆盖另一个

Question

我有一个视频上传器，它可以在上下文中上传视频，这样你就可以在上传时在应用程序中移动。上传后，它会调用一个侦听器来检查视频的进度状态。如果我试图将另一个视频添加到存储为state.files的队列中，并且侦听器正在运行，当侦听器更新state.file斯数组项时，当我试图在另一个调度中添加新视频时，新视频会消失。如果两者同时发生，我如何更新同一道具的状态。以下是我现在用于检查视频进度的间隔事件的内容：

const checkTranscode = () =>{
const vals = {
account_id: videoState.user.account,
}
axios.all([
axios.post('/endpoint1', vals), 
axios.post('/endpoint2', vals)
])
.then(axios.spread((data1, data2) => {
let id:number
let prop:any
let value:any
data1.data.map(function(qfile:any){
videoState.files.map(function(file:any, idx:number){
if(qfile.uuid === file.uuid){
if(qfile.percent_complete && qfile.percent_complete > 0 && qfile.status === 'TRANSCODING'){
id = idx
prop = 'file_status'
value = 'Transcoding'
dispatch({ type: 'update-file-item', file, id, prop, value })
prop = 'transcode_progress'
value = Math.ceil(qfile.percent_complete)
dispatch({ type: 'update-file-item', file, id, prop, value })
}
if(!qfile.percent_complete){
id = idx
prop = 'transcode_progress'
value = 0
dispatch({ type: 'update-file-item', file, id, prop, value })
}

if(qfile.status === 'TRANSCRIBING'){
id = idx
prop = 'file_status'
value = 'Transcribing'
dispatch({ type: 'update-file-item', file, id, prop, value })
}
}
})
})
data2.data.map(function(qfile:any){
videoState.files.map(function(file:any, idx:number){
if(qfile.uuid === file.uuid){

if(file.file_status === 'Transcribing' && qfile.status === 'READY'){
id = idx
dispatch({ type: 'remove-file-by-id', id })
}
if(qfile.status === 'STORED' && file.storage){
id = idx
dispatch({ type: 'remove-file-by-id', id })
}
}
})
})
}));
}

然后从放入容器中添加文件：

addFilesFromDrop: (dropFiles:any) =>{
const existingFiles = videoState.files
const arrFiles = Array.from(dropFiles)
let exists = false
let newId = videoState.maxId
const newFiles = arrFiles.map((file:any) => {
if(existingFiles.length > 0){
existingFiles.map((efile) =>{
const newFile:any = file

if(efile.file){
if(efile.file.name === newFile.name){
exists = true
}
}else{
//errored uploads will not have a file
if(efile.original_filename === newFile.name){
exists = true
}
}
})
}
newId++
const src = window.URL.createObjectURL(file)
return { file, id: newId, src, file_status:'Ready' }
})
if(!exists){
const maxId = newId
const file = newFiles
dispatch({ type: 'add-file-to-list', file, maxId})
}else{
return
}

}

减速器的动作如下：

case 'add-file-to-list':
return { 
...state, 
files:[...state.files, action.file],
maxId: action.maxId
}
case 'update-file-item':
const index = state.files.findIndex(file => file.id !== action.id);
const newArray = [...state.files];
newArray[index][action.prop] = action.value
return { 
...state, 
files: newArray
}

提前谢谢。

Answer 1

忘记我的更新中的排列-

case 'add-file-to-list':
return { 
...state, 
files:[...state.files,...action.files],
maxId: action.maxId
}

这修复了它。