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

Question

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

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

reducer 操作如下所示：

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
      }

这解决了它。