Erste Iteration der asynchronen Schleife gibt Fehler

Question

Ich versuche, meine Mediendateien zu laden, um in meine Anwendung zu laden. Ich muss nacheinander mehrere Ajax-Anrufe machen.

Problem: Ich bekomme Fehler mit dem Hinweis "Kann nicht lesen 'Karte' von undefined". Ich ordne auto_video_jobs_array in meiner Render-Methode irgendwo ein.

Der folgende Code zeigt, wie ich Async-Aufrufe in der Reihenfolge Ajax und den Status Current_auto_video_jobs festlegen. Am Ende des letzten Ajax-Aufrufs kann ich den Wert des Status current_auto_video_jobs konsolen und sehen, dass darin Objekte enthalten sind.

(Denn es ist leichter zu verstehen, machen ich die variablen und staatlichen Erklärungen auch in meiner ques zeige,)

var auto_video_jobs_array = []; 
var auto_video_jobs_urls = []; 



state = { 
     MediaFiles: [], 
     fileURLS: [], 
     current_auto_video_jobs: [[{job_type:"", eta:0}],[{job_type:"", eta:0}],[{job_type:"", eta:0}],[{job_type:"", eta:0}],[{job_type:"", eta:0}],[{job_type:"", eta:0}],[{job_type:"", eta:0}],[{job_type:"", eta:0}],[{job_type:"", eta:0}],[{job_type:"", eta:0}]], 
     current_auto_video_jobs_urls: [], 
     loader: true 
    }; 



componentDidMount =() => { 

     var that = this; 

     this.init_get_media_files(); 

     refreshIntervalId = setInterval(this.get_process_status.bind(this), 60000); //new 

    } 

init_get_media_files() { 

     var that = this; 
     var URL_array = []; 

     auto_video_jobs_urls = []; 


     var settings = { 
      "async": true, 
      "crossDomain": true, 
      "url":url, 
      "method": "GET", 
      "headers": { 
       Authorization: "Token " + that.props.token_Reducer.token 
      }, 
      success: function (response, textStatus, jQxhr) { 
       response.results.map((item, i) => { 
        URL_array.push(item.url) 

        auto_video_jobs_urls.push(item.latest_process_status)//new 
       }) 
      }, 
     } 
     $.ajax(settings).done((response) => { 


      //alert("yo"); 
      that.setState({ 
       MediaFiles: response.results, 
       fileURLS: URL_array, 

       current_auto_video_jobs_urls: auto_video_jobs_urls 
      }) 


      this.get_first_process_status(); 

     }); 
    } 

Dies ist, wo ich Ajax-Aufrufe in Folge

get_first_process_status() { //this is where problem comes 

     console.log("inside get_process_status") 
     // console.log("current jobs are" + auto_video_jobs_urls[1]) 
     console.log("jobs url array length is " + auto_video_jobs_urls.length) 

     auto_video_jobs_array = []; 

     //initialize index counter 
     let i = 0; 
     let that = this; 
     that.setState({loader:true}) 
     function next() { 
      $.ajax({ 
       async: true, 
       "crossDomain": true, 
       "url": that.state.current_auto_video_jobs_urls[i], 
       "method": "GET", 
       "headers": { 
        Authorization: "Token " + that.props.token_Reducer.token 
       }, 
       success: function(response, textStatus, jQxhr){ 
        ++i; 
        if(i >= that.state.current_auto_video_jobs_urls.length) { 
         // run function here as its the last item in array 
         console.log("i reached last value" + i + " " + response) 

         that.setState({current_auto_video_jobs: auto_video_jobs_array, loader:false}) 
         console.log("current jobs are" + that.state.current_auto_video_jobs[0]) 

        } else { 
         // do the next ajax call      
         auto_video_jobs_array.push(response) 
         next(); 
        } 
       } 
      }); 
     } 


     //start the first one 
     next(); 
    } 

machen Wenn ich laufen get_first_process_status Zum zweiten Mal nach einem Intervall von etwa 10 Sekunden geht der Fehler und Mediendateien werden sichtbar. Dies bedeutet, dass die Ajax in richtiger Weise ausgeführt werden. Es ist nur so, dass der Status current_auto_video_jobs irgendwie nicht im ersten Moment gemappt wird.

Es hätte in der ersten Zeit auch funktionieren sollen. Ich bin nicht in der Lage, einen Grund für einen Fehler zu sehen "Kann nicht lesen Eigenschaft Karte von undefined" wie am Ende des letzten Ajax Aufruf der Staat wird gesetzt.

Dies ist meine Karte Funktion

{this.state.current_auto_video_jobs[i].map((item, i) => { 
                    let w; 
                    if (item.eta <= 1) { 
                     w = item.eta 
                    } 
                    else 
                     w = 0; 
                    let s = { 
                     width: ((w) * 100) + "%", 
                    }; 
                    return <a href="#" className="btn"> 
                     <div className="prog-medbtn" style={s}></div> 
                     {item.job_type}</a> 
                   } 
                  )} 

Wie kann ich dieses Problem lösen? Ich habe alles versucht.

Auch: Wenn ich einen AJAX-Aufruf mit async: false ausführen, dann kommt der Fehler nicht.

Answer 1

Dies ist wahrscheinlich nicht die beste Praxis ist, aber ich werde manchmal die Fehler vermeiden, indem Sie gerade tun:

(this.state.current_auto_video_jobs[i] || []).map 

So dass, wenn der Artikel noch nicht existiert, anstatt zu versuchen, map auf undefined zu nennen, es ruft es stattdessen auf einem leeren Array auf.