在反应js组件中获取django render参数 [英] Fetch django render argument in react js component
问题描述
我正面临着将django render参数作为服务器响应传递的问题，并使用反应组件获取它，然后将其发送到html。
I'm facing issues with passing the django render argument as a server response and fetch it using react component and then send it to 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'));
以下是反应组件将呈现输出的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内容）正确的json值直接来自Django，但下面的部分在html（即app div和javascript下面）没有返回内容的反应。 reactResponseNoDefaultJson.js'是最小化的反应js。
The {{ personal_detail }} part (in above HTML content) gives the correct json value directly from Django, but the below part in html (i.e. app div and the javascript below) is not returning the content from react. reactResponseNoDefaultJson.js' is the minified react js.
推荐答案
我不是一个JS英雄我想你需要django视图来返回一个json响应来解决：
Well I am not a JS hero but i think you need the django view to return a json response to solve:
//<这是问题行
"// << This is the problem " line
查看文档为json响应对象。
check the documentation for json response object.
这篇关于在反应js组件中获取django render参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
