Fetch Django Renderargument in reagieren js Komponente

Ich habe Probleme mit der Übergabe der Django Render-Argument als Server-Antwort und holen Sie es mit Hilfe der Komponente reagieren und dann an HTML senden.Fetch Django Renderargument in reagieren js Komponente

Unten ist der Code Django:

def view_personal_details (request): 
    personal_detail_json = personal_details.objects.all() 
    personal_detail = serializers.serialize('json', personal_detail_json) 
    return render (request, "webFiles/reactOutput.html", {'personal_detail': personal_detail})

den Code reagieren ist geschützt, die holen 'personal_detail' über django Antwort gesendet:

var categories = []; //{ "model": "buglockerApp.authentication_details", "pk": 1, "fields": { "userid": "001", "password": "[email protected]", "sec_que": "Pet Name", "sec_ans": "Jerry" } }]; 

var App = _react2.default.createClass({ 
    displayName: 'App', 

    getInitialState: function getInitialState() { 
     return { 
      data: null 
     }; 
    }, 
    componentDidMount: function componentDidMount() { 
     var self = this; 
     //var http = require("http"); 
    var REQUEST_URL = "/viewPersonalDetails"; 
    // var request = http.get(REQUEST_URL, function (response) { 
    // console.log ("react response" + JSON.stringify(response)); 
    // var buffer = "", 
    //   data; 
    //  console.log("categories :" + JSON.stringify(categories)); 
    // response.on("data", function (chunk) { 
    //   buffer += chunk; 
    // }); 

    // response.on("end", function (err) { 
     //  self.setState({ 
     //   categories: buffer 
     //  }); 
     //  console.log('buffer: ' + buffer); 
    //  console.log('categories: ' + JSON.stringify(categories)); 
    // }); 
    // }); 

    fetch(REQUEST_URL, { 
      method: 'get', 
      dataType: 'json', 
      headers: { 
      'Accept': 'application/json', 
      'Content-Type': 'application/json' 
      } 
     }) 
     .then((response) => 
      { 
      return response.json() // << This is the problem 
      }) 
     .then((responseData) => { // responseData = undefined 

      return responseData; 
     }) 
     .then((data) => { 

      console.log(data); 
     }); 
    }, 
    render: function render() { 
     return _react2.default.createElement(
      'div', 
      null, 
      _react2.default.createElement(_griddleReact2.default, { results: categories, tableClassName: 'table', showFilter: true, showSettings: true, columns: [] }) 
     ); 
    } 
}); 

_reactDom2.default.render(_react2.default.createElement(App, null), document.getElementById('app'));

Im Folgenden ist der HTML Inhalt, auf den die reagierende Komponente die Ausgabe rendert:

<!DOCTYPE html> 
<html lang = "en"> 
    <head> 
     <meta charset = "UTF-8"> 
     <title>React First App</title> 
     {% load static %} 
    </head> 
    <body> 
     Django Direct Output: <br /> 
     {{ personal_detail }} 
     ------------------------ <br /> 
     React Output: <br /> 
     <div id = "app"></div> 
     <script src = "{% static 'js/reactResponseNoDefaultJson.js' %}"></script> 
    </body> 
</html>

Die {{}} personal_detail Teil (in oben HTML-Gehalt) gibt den Wert korrekt json direkt von Django, aber den unten stehenden Teil in HTML (d.h. App div und das Javascript unten) gibt nicht den Inhalt von reagieren. reactResponseNoDefaultJson.js ' ist die minimierte Reaktion js.

Quelle

2016-08-13 Rajiv Gupta

Gibt es überhaupt keine Antwort? Ich denke, dass es Markup geben sollte. Drucken Ihre Konsolenprotokolle nichts? Ich bin kein Experte in der Reaktion, kann also nicht viel über diesen Code sagen, aber ich vermute, da ist etwas falsch in Ihrem 'componentDidMount()' –

Ich habe auch nicht viel Wissen zu reagieren. Ich bin mit diesem Problem konfrontiert. –

Es gibt eine Antwort sicher. Aber "wie man es in Reaktion holt?" ist die Frage ... –

Nun, ich bin kein JS Held, aber ich denke, dass Sie die django Ansicht brauchen eine JSON-Antwort zurück zu lösen:

„// < < Das ist das Problem“ -Linie

Kontrolle der documentation für JSON-Antwortobjekt.

Quelle

2016-08-15 08:43:03 HADEEL

Fetch Django Renderargument in reagieren js Komponente

Antwort

Verwandte Themen