2017-10-20 15 views
0

私はレールプロジェクトのフロントエンドライブラリとしてReactを使用していますが、私はユーザーのエラーを表示している問題を抱えています。リクエストを送信するのにAjaxを使用していますが、Reactプロジェクトから重複を削除

$.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 
    }, 
    }); 

、私は共有ファイルを考えていた離れて冗長性から自分のコードを維持するための効率的な方法があります:サーバー側のようなすべてのReact.Component何か内部のすべての要求にエラーを返した場合、私の自己複製エラーは、関数をコールバック共有関数を含み、各React.Componentの内部にそれを含めるが、私はこれに似た何かを見つけられなかった。

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, 
     }); 
     } 
    } 
    } 
} 

をそして、あなたのファイル間でその機能を共有:

+0

これは、サーバー側の問題ではないですか? SQLクエリに 'distinct'キーワードを追加してみてください。 – fungusanthrax

+0

いいえ、私はすべての要求でユーザーにエラーを表示するための応答であるコードを複製しています。これは私の問題です。 –

+0

私たちとエラー機能を共有することができます –

答えて

0

あなたのエラーを処理する関数を作成することができます。

あなたはこのようにそれを使用します。

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

私はこれを最初にやろうとしていましたが、私は自分のレールプロジェクトで間違ってやっていました。 'app/assets/javascript'の下に' shared_functions.js'という名前のファイルを分割して作成しました。 –