嵌套for循環不能與Redux Thunk

Question

我遇到了redux thunk流的問題。

在動作創建器中，我首先創建一個圖像對象並從數據庫中獲取image_id。

我有一個變種叫clients這是所有客戶端ID的列表，將需要圖像ID。 [1,2,3,4,5]

我通過for循環，使用axios.get獲取客戶端，並將新的image_id添加到來自客戶端字段的圖像列表中。

然後，我將新更改置於字段client_images中的客戶端。

export function addNewClient(imageData, clients) { 
    return function(dispatch) { 
     axios.post(`${API_URL}/media`, fileData, { withCredentials: true, headers: { 'Content-Type': 'multipart/form-data' } }) 
      .then(response => { 
       var image_id = response.data.id; 

       //go through each client to get current background list 
       for (var i = 0; i < clients.length; i++) { 
        var currRow = clients[i]; 
        console.log("GETTING NEW CLIENT", currRow) 
        axios.get(`${API_URL}/clients/${currRow}`, { withCredentials: true }) 
         .then(response => { 
          var currImages = response.data.client_images; 
          var clientImages = [...currImages, image_id]; 
          console.log("ADDING NEW CLIENT IMAGE IDs", currRow); 
          axios.put(`${API_URL}/clients/${currRow}`, {client_images:clientImages}, { withCredentials: true }) 
         }) 
         .catch(() => { 
          console.log("Can't set image list to clients"); 

         }); 
       } 
      }); 
    } 

}

我的問題就出在這裏： 之前，我可以打電話

axios.put(`${API_URL}/clients/${currRow}`, {client_images:clientImages}, { withCredentials: true }) 

在我的控制檯整個for循環完成，這是輸出

如您所見，添加新的Cl客戶圖像僅在for循環完成後調用。我需要將「添加新客戶端映像」稱爲INSIDE for循環，以便可以調用另一個axios函數，而不是將其稱爲5次到ID爲5的客戶端。

有沒有辦法獲得for循環工作在還原thunk？

Answer 1

啊，這個一開始總是很棘手。在數組中使用promise時，請使用array.map而不是for循環。因此，嘗試改變這個：

for (var i = 0; i < clients.length; i++) { 
    var currRow = clients[i]; 
    axios.get(`${API_URL}/clients/${currRow}`, { withCredentials: true }) 
    // ... 
} 

要這樣：

return Promise.all(clients.map(function(currRow){ 
    return axios.get(`${API_URL}/clients/${currRow}`, { withCredentials: true }) 
    // ... 
})); 

，將確保所有承諾都擁有自己的範圍。

所以最終的結果是一樣的東西：

export function addNewClient(imageData, clients) { 
    return function(dispatch) { 
     axios.post(`${API_URL}/media`, fileData, { withCredentials: true, headers: { 'Content-Type': 'multipart/form-data' } }) 
      .then(response => { 
       var image_id = response.data.id; 

       //go through each client to get current background list 
       return Promise.all(clients.map(function(currRow){ 
        console.log("GETTING NEW CLIENT", currRow) 
        return axios.get(`${API_URL}/clients/${currRow}`, { withCredentials: true }) 
         .then(response => { 
          var currImages = response.data.client_images; 
          var clientImages = [...currImages, image_id]; 
          console.log("ADDING NEW CLIENT IMAGE IDs", currRow); 
          return axios.put(`${API_URL}/clients/${currRow}`, {client_images:clientImages}, { withCredentials: true }) 
         }) 
         .catch(() => { 
          console.log("Can't set image list to clients"); 

         }); 
       })); 
      }); 
    } 
}