ReactDOM.Render 내부 $ .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') 
     ); 
    } 
}); 

, 내가 콘솔에서 나는 오류가 계속 그것을 실행하려고 :

이

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

가까이 검사 오류 내부의 라인 ReactDOM.render에있을 수있는 문제를 보여줍니다 콜백. 이 콜백 내에서 사용할 수 있습니까? 나는 그것을 외부에서 사용하려고 시도했으나 콜백 함수의 비동기 특성 때문에 작동하지 않는다. 누군가가 문제를 해결할 수있는 방법을 알고 있습니까? 미리 감사드립니다!

Answer 1

$ .ajax로 $ .post를 뒤집은 것처럼 보입니다. 함수의 형식은 ReactDOM이 errorDialog의 id를 가진 요소를 발견하지 않았기 때문에 당신이 Minified exception occurred 오류가있는 것처럼 모든의 $ .post

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

Answer 2

먼저 옆은, 보이는, $ 아약스입니다 귀하의 설정에 따라 $.ajax 대신 $.post을 사용하십시오 ... statusText에 대한 하나의 상태를 설정하고 거기에 도달하는 값을 저장하는 것이 좋습니다. 나는 당신을위한 모범을 준비했습니다. 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'));