非同期ループの最初の反復でエラーが発生する

Question

アプリケーションにロードするメディアファイルデータを取得しようとしています。私は複数のajax呼び出しを順番に行う必要があります。

問題：「未定義のプロパティ 'map'を読み取ることができません」というエラーが表示されます。私はauto_video_jobs_arrayをどこかのレンダリングメソッドにマッピングしています。

以下のコードは、私がajax非同期呼び出しをどのようにして順番に行い、状態current_auto_video_jobsを設定するかを示しています。最後のajax呼び出しの終わりに、私はstate current_auto_video_jobsの値を表示して、その中にオブジェクトがあることを見ることができます。

（それが簡単に理解することについて、私は私のQUESにも変数と状態の宣言を示しています）

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(); 

     }); 
    } 

私は実行すると、私はシーケンス

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

でAJAX呼び出しを行う場所ですget_first_process_status 2回目に10秒後にエラーが発生し、メディアファイルが表示されます。これは、ajaxが正しい方法で実行されることを意味します。 current_auto_video_jobsが何らかの形で最初にマップされていない状態です。

これは初回でも有効でした。私は、エラーの理由を見ることができません "状態を取得する最後のajax呼び出しの最後に"未定義のプロパティ 'マップ'を読み取ることはできません。

これは私のマップ機能

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

どのように私はこの問題を解決しますでしょうか？私はすべてを試しました。

また、async：falseを指定してajax呼び出しを実行すると、エラーは発生しません。

Answer 1

これはおそらくベストプラクティスではありませんが、私は時々ちょうど行うことでエラーを回避ます：、アイテムがまだ存在しない場合ようにするため

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

を、代わりにundefinedにmapを呼び出そうとします代わりに空の配列上でそれを呼び出します。