在反应 js 组件中获取 django 渲染参数答案

【问题标题】：Fetch django render argument in react js component在反应 js 组件中获取 django 渲染参数
【发布时间】：2016-12-20 12:48:25
【问题描述】：

我在将 django 渲染参数作为服务器响应传递并使用 react 组件获取它然后将其发送到 html 时遇到问题。

以下是 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})

以下是反应代码，用于获取通过 django 响应发送的“personal_detail”：

var categories = []; //{ "model": "buglockerApp.authentication_details", "pk": 1, "fields": { "userid": "001", "password": "rajiv@247", "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'));

下面是 react 组件渲染输出的 HTML 内容：

<!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>

{{personal_detail }} 部分（在上面的 HTML 内容中）直接从 Django 提供正确的 json 值，但是 html 中的下面部分（即应用程序 div 和下面的 javascript）没有返回来自反应的内容。 reactResponseNoDefaultJson.js' 是缩小的 react js。

【问题讨论】：

绝对没有回应吗？我觉得应该有标记。您的控制台日志不打印任何内容吗？我不是反应专家，所以不能对代码说太多，但我猜你的 componentDidMount() 有问题
我也没有多少反应知识。那就是我正面临这个问题。
肯定有回应。但是“如何在反应中获取它？”问题是……
如果有帮助，请检查...stackoverflow.com/questions/33237200/…
看起来它以某种方式有所帮助，但仍然没有输出。相反，我开始在控制台日志上收到 Json Parse 错误。图片：link（星号是反应输出）。当我直接打印图像时，是这样的：link

标签： javascript html django reactjs

【解决方案1】：

好吧，我不是 JS 英雄，但我认为您需要 django 视图返回 json 响应来解决：

"//

检查 documentation 以获得 json 响应对象。

【讨论】：