ReactDOM.render innerhalb $ .post Fehler Rückruf

Question

Ich bin neu zu Reagieren und versuchen, eine Fehlermeldung zu rendern, wenn eine POST-Anfrage einen Fehler zurückgibt. Etwas wie folgt aus:

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

Allerdings, wenn ich versuche, es zu laufen, in der Konsole ich immer einen Fehler bekommen:

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

Bei näherer Betrachtung zeigt das Problem in der Leitung sein ReactDOM.render innerhalb des Fehler Rückrufen. Kann dies nicht innerhalb des Callbacks verwendet werden? Ich habe versucht, es draußen zu verwenden, aber möglicherweise aufgrund der asynchronen Art von Callback-Funktionen, es funktioniert nicht. Weiß jemand, wie ich das Problem beheben kann? Danke im Voraus!

Answer 1

Es sieht so aus, als ob Sie die $ .post mit $ .ajax umgedreht haben. Ihre Funktion Format ist für $ Schnipsel, nicht $ .post

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

Answer 2

Zunächst einmal sieht aus wie Sie die Minified exception occurred Fehlermeldung erhalten, weil ReactDOM nicht das Element mit der ID von errorDialog gefunden haben, neben Sie sind Verwenden $.post anstelle von $.ajax basierend auf Ihren Einstellungen ... Ich empfehle Ihnen, einen Zustand für die statusText einrichten und speichern Sie den Wert, den Sie dort erhalten. Ich habe ein Beispiel für dich vorbereitet. 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'));