J'ai une fonction dans la configuration de mon application React en tant qu'événement onClick qui renvoie un ensemble de données à une API, puis j'en ai besoin pour rediriger vers une autre URL APRÈS avoir fini d'envoyer les données. J'avais déjà essayé de le faire en enveloppant simplement le bouton avec une balise d'ancrage et un href, mais chaque fois qu'un utilisateur appuie sur le bouton, il le redirige avant la fin de l'événement onClick. J'ai inclus la fonction ci-dessous. Des idées sur la façon d'ajouter une redirection après la logique d'envoi initiale ?

Une fonction

this.submitData = () => {
  let temporalDataModel = {
    ...this.state.dataModel,
    SessionId: this.state.customer.SessionId,
    customerId: this.state.customer.CustomerId
  };

  //// This is the logic to send the the data back to my API

  let postUrl = "https://myAPI.com/OfferUpdate";
  axios
    .post(postUrl, temporalDataModel)
    .then(response => {
      console.log(response);
    })
    .catch(err => {
      console.error(err);
    });

  console.log("This is your data...sending...NOW", temporalDataModel);
};
0
Josh 14 mars 2019 à 16:40

2 réponses

Meilleure réponse

Vous devez déplacer votre code de publication sur le côté puis fonctionner comme ci-dessous. Comme votre code de publication est hors fonction, il s'exécute avant que l'api ne revienne avec le résultat.

axios
  .post(postUrl, temporalDataModel)
  .then(response => {
    console.log(response);
    console.log("This is your data...sending...NOW", temporalDataModel);
  })
  .catch(err => {
    console.error(err);
  });
1
Tholle 14 mars 2019 à 13:49

Eh bien, en fait, votre fonction submitData exécute du code asynchrone ... Donc, si vous voulez attendre que l'action soit terminée, vous devez rediriger vers l'autre site Web dans le résultat de votre promesse dans le then ou catchif une exception se produit.

0
Charles-olivier Demers 14 mars 2019 à 13:44