0
djangoのレンダリング引数をサーバーレスポンスとして渡し、反応コンポーネントを使用してフェッチし、htmlに送信する際に問題があります。以下は反応jsコンポーネントのdjangoレンダリング引数を取得する
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": "[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'));
は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>
部分（上記のHTMLコンテンツ）は、Djangoから正しいjson値を直接返しますが、html（つまり、アプリdivと下のjavascript）が反応のコンテンツを返さないreactResponseNoDefaultJson.js 'は縮小された反応jsです。
絶対に応答はありませんか？マークアップがあるはずです。コンソールログには何も印刷されませんか？私は反応の専門家ではないので、そのコードについてはあまり言い表せませんが、あなたの 'componentDidMount（）'に何か間違っていると思います。 –
私は多くの反応知識を持っていません。それはyです。私はこの問題に直面しています。 –
確かに応答があります。しかし、「反応でそれを取り出す方法は？」 ... –