ajax在渲染後調用負載

Question

我是新來的反應和redux，我面臨一個非常奇怪的問題。我有一個動作如下：

export function getStorySnippetsAction(snippetsLink, channel) { 

return dispatch => { 
    let storiesSnoppet = []; 

    for (var i = 0; i < snippetsLink.length; i++) { 

     $.ajax({ 
      url: snippetsLink[i], 
      dataType: 'json', 
      cache: false, 
      success: function (data) { 
       storiesSnoppet.push(data); 
       console.log("xxxxxxxxxxxxxxxxxxxxx"); 
       console.log(storiesSnoppet); 

      }.bind(this) 
     }); 
    } 


    dispatch({ 
     type: "SET_STORY_SNIPPET", 
     payload: {"channel": channel, "storiesSnippet": storiesSnoppet} 

    }); 

}; 

}

正如你可以看到我有一些Ajax調用在一個循環，然後我用dispach設置狀態。現在我的問題是ajax調用是異步的，所以當ajax發送請求時，dispach發生並且不會等待所有ajax調用完成。另外，以下是我所得到的，當我打印出控制檯payload.action：

正如你可以看到，當對象是摺疊它的大小爲0，當我展開我可以看到列表中的一些對象。我對這種奇怪行爲的唯一猜測是異步調用在渲染之後完成，並且自從componentdidmount（我稱之爲getStorySnippetsAction）發生後，再次發生再次發生並且我沒有看到任何結果。有人告訴我應該把getStorySnippetsAction放在componentdidupdate裏面，但是當我這樣做的時候，似乎發生了一個無限循環並且頁面從不加載（我可以看到，在控制檯中，同樣的東西被再次寫入並獲得，這意味着組件做了更新無限調用）。現在我完全卡住了。如果我在componentdDUpUpdate中調用getStorySnippetsAction，我將陷入無限循環，如果我在componentDidMount中調用它，ajax會花費更長的時間，渲染和渲染將與空數組發生，而不是加載ajax結果。

任何人都可以幫忙嗎？ （即使是一個想法可能會幫助我解決這個問題。）感謝一百萬）

Answer 1

這裏的想法是，你將每個請求轉換爲無極並將其存儲在數組中。一旦完成每個請求，我們將用數據解決它。最後，一旦數組中的所有promise都解決了，那麼我們就調用dispatch解決這個值。

export function getStorySnippetsAction(snippetsLink, channel) { 
 

 
    return dispatch => { 
 
    let storiesSnoppet = []; 
 

 
    for (var i = 0; i < snippetsLink.length; i++) { 
 
     storiesSnoppet.push(new Promise((resolve, reject) => { 
 
     $.ajax({ 
 
      url: snippetsLink[i], 
 
      dataType: 'json', 
 
      cache: false, 
 
      success: function(data) { 
 
      resolve(data); 
 
      console.log("xxxxxxxxxxxxxxxxxxxxx"); 
 
      console.log(storiesSnoppet); 
 
      }.bind(this) 
 
     }); 
 
     })); 
 
    } 
 

 
    Promise.all(storiesSnoppet).then((values) => { 
 
     dispatch({ 
 
     type: "SET_STORY_SNIPPET", 
 
     payload: { 
 
      "channel": channel, 
 
      "storiesSnippet": values 
 
     } 
 
     }); 
 
    }); 
 
    }; 
 
}

Answer 2

爲什麼不把你的調度從async模塊回調後，而不是for循環？

實施例：

import parallel from 'async/parallel' 
export function getStorySnippetsAction(snippetsLink, channel) { 

return dispatch => { 
    let storiesSnoppet = []; 
    const ajaxFunctionArray = snippetsLink.map(i => { 
     return function(callback) { 
     $.ajax({ 
      url: snippetsLink[i], 
      dataType: 'json', 
      cache: false, 
      success: function (data) { 
       storiesSnoppet.push(data); 
       callback(null) 
       console.log("xxxxxxxxxxxxxxxxxxxxx"); 
       console.log(storiesSnoppet); 
      }.bind(this) 
     }); 
     }) 
    //it ill make the posts in parallel and them dispatch just after all have finished 

    async.parallel(ajaxFunctionArray, function (err, result) { 
     dispatch({ 
     type: "SET_STORY_SNIPPET", 
     payload: {"channel": channel, "storiesSnippet": storiesSnoppet} 

    }); 
    } 

};