ReactDOM。レンダリング中の$ .postエラーコールバック

Question

POST要求がエラーを返すときにエラーメッセージを表示して反応させようとするのが初めてです。このような何か：

$.post({ 
    url: `/abc/xyz/`, 
    cache: false, 
    dataType: 'json', 
    data: data, 
    contentType: 'application/json; charset=utf-8', 
    success: function (response) { 
     ... 
    }, 
    error: function (response) {  
     ReactDOM.render(
      <div> 
       <p>response.statusText</p> 
      </div>, 
      document.getElementById('errorDialog') 
     ); 
    } 
}); 

私はそれを実行しようとすると、しかし、コンソールに私はエラーを取得しておいてください。検査は問題がエラーの内側のラインReactDOM.renderであることを示して

Uncaught Error: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings. 

クローサー折り返し電話。これはコールバックの内部で使用できませんか？私はそれを使用しようとしましたが、おそらくコールバック関数の非同期性のために動作しません。誰かが私がどのように問題を解決できるか知っていますか？前もって感謝します！

Answer 1

$ .ajaxで$ .postを反転したようです。あなたの関数形式は、$アヤックスのための$ .postない

http://api.jquery.com/jQuery.post/ある

Answer 2

まずReactDOMはあなたが隣に、errorDialogのIDを持つ要素を見つけることができませんでしたので、あなたがMinified exception occurredエラーを取得しているように見えますあなたの設定に基づいて$.ajaxの代わりに$.postを使用して... statusTextの1つの状態をセットアップし、そこに到達する価値を保存することをお勧めします。私はあなたのための例を用意しました。 ES6：

import React, { Component } from 'react'; 

export default class App extends Component { 

    constructor() { 
    super(); 
    this.state = { 
     statusText: null 
    }; 
    } 

    componentDidMount() { 
    $.ajax({ 
     type: 'POST' 
     url: `/abc/xyz/`, 
     cache: false, 
     dataType: 'json', 
     data: data, 
     contentType: 'application/json; charset=utf-8', 
     success: function (response) { 
      console.log("$.post success", response); 
     }, 
     error: function (response) { 
      this.setState({ 
      statusText: response.statusText 
      }); 
     } 
    }.bind(this)); 
    } 

    render() { 
    const { statusText } = this.state; 
    return (
     <div> 
     <p>{statusText}</p> 
     </div> 
    ) 
    } 
} 

ReactDOM.render(<App/>, document.getElementById('errorDialog'));