supprimer dupliquer du projet React

Question

J'utilise React comme une bibliothèque frontale pour mon projet de rails, j'ai eu un problème qui montre les erreurs pour l'utilisateur, j'utilise Ajax pour envoyer une requête mais j'ai trouvé ma fonction rappel erreur auto duplicateur si le côté serveur renvoie des erreurs dans chaque demande à l'intérieur de chaque React.Component quelque chose comme:

$.ajax({ 
    url: URL, 
    type: METHOD, 
    data: { 
     //data 
    }, 
    success: function() { 
     //calling some function 
    }.bind(this), 
    error(error) { 

     // begin 
     server_errors = JSON.parse(error.responseText); 
     array_of_keys_of_errors = Object.keys(server_errors); 
     for(i = 0 ; i < array_of_keys_of_errors.length; i++){ 
     nested_keys = Object.keys(server_errors[array_of_keys_of_errors[i]]); 
     for(j = 0 ; j < nested_keys.length; j++){ 
      array_of_errors = server_errors[array_of_keys_of_errors[i]][nested_keys[j]]; 
      for(k = 0 ; k < array_of_errors.length; k++){ 
      bootbox.alert({ 
       message: nested_keys[j] + ' ' + array_of_errors[k], 
       closeButton: false, 
      }); 
      } 
     } 
     } 
     // end 
    }, 
    }); 

est-il un moyen efficace de garder mon code loin de la redondance, je pensais à un fichier partagé contient des fonctions partagées et les inclut dans chaque composant React.Component mais je n'ai pas trouvé quelque chose de similaire.

Answer 1

Vous pouvez créer une fonction pour gérer vos erreurs:

function handleErrors(errors) { 
    const server_errors = JSON.parse(error.responseText); 
    const array_of_keys_of_errors = Object.keys(server_errors); 
    for(i = 0 ; i < array_of_keys_of_errors.length; i++){ 
    nested_keys = Object.keys(server_errors[array_of_keys_of_errors[i]]); 
    for(j = 0 ; j < nested_keys.length; j++){ 
     array_of_errors = server_errors[array_of_keys_of_errors[i]][nested_keys[j]]; 
     for(k = 0 ; k < array_of_errors.length; k++){ 
     bootbox.alert({ 
      message: nested_keys[j] + ' ' + array_of_errors[k], 
      closeButton: false, 
     }); 
     } 
    } 
    } 
} 

Et partager cette fonction dans vos fichiers.

Vous l'utiliser comme ceci:

$.ajax({ 
    url: URL, 
    type: METHOD, 
    data: { 
    //data 
    }, 
    success: function() { 
    //calling some function 
    }.bind(this), 
    handleErrors 
})