2017-08-30 1 views
0

En utilisant React et Redux, j'ai besoin d'attendre que toutes mes actions soient remplies afin de mettre à jour l'état du composant. Lecture de docs Axios J'ai trouvé axios.all pour collecter toutes mes actions et attendre que toutes soient résolues (au fond, j'appelle n fois une API pour obtenir des informations sur n éléments). Le problème est que le fichier console.log dans la fonction .then de axios.all ne renvoie rien du tout, mais les actions sont distribuées correctement.Axios.all dans componentWillReceiveProps non appelé

if (this.props.evaluation && this.props.evaluation.topics) { 
    var promises = [] 

    var array = this.props.evaluation.topics; 
    var selectedArray = [] 
    for (var i = 0; i < array.length; i++) { 
    promises.push(this.props.fetchTopic(array[i])) 
    } 

    axios.all(promises).then(function(results) { 
    results.forEach(function(response) { 
     console.log('///////////////////////'); 
     console.log(response.value); 
     console.log('///////////////////////'); 
    }) 
    }); 
} 

EDIT: Voici mon code fetchTopic

Dans mon composant:

const mapDispatchToProps = (dispatch) => ({ 
    fetchTopic: (id) => dispatch(fetchTopic(id)), 
}) 

Dans mes actions.js

export const fetchTopic = (id) => ({ 
    type: "FETCH_TOPIC", 
    payload: axios.get(process.env.SERVICE_URL + '/topic/' + id, { headers: { 'Authorization': 'JWT ' + sessionStorage.jwt }}) 
}) 
+0

Ajouter code 'fetchTopic'. Assurez-vous qu'il renvoie une promesse. –

+0

Les créateurs d'actions doivent retourner des objets javascript simples, le vôtre renvoie un appel axios dans la charge utile qui ne fonctionnera pas –

Répondre

0

Modifier cette

export const fetchTopic = (id) => ({ 
    type: "FETCH_TOPIC", 
    payload: axios.get(process.env.SERVICE_URL + '/topic/' + id, { headers: { 'Authorization': 'JWT ' + sessionStorage.jwt }}) 
}) 

à cette

export const fetchTopic = (id, cb) => { 
    axios.get(process.env.SERVICE_URL + '/topic/' + id, { headers: { 'Authorization': 'JWT ' + sessionStorage.jwt }}) 
    .then((response) => { 
     if (cb) cb({ type: "FETCH_TOPIC", payload:response }) 
    }); 
    } 

et exécuter

for (var i = 0; i < array.length; i++) { 
    this.props.fetchTopic(array[i], (result) => { 
    // get the result here 
    }) 
}