javascript(react)について

react入門サイト（http://www.fumiononaka.com/Business/html5/FN1608006.html）をお借りして、勉強しています。

こちらのプログラムで処理したいことは以下となります。
テキストボックスに文字を入力し、送信ボタンを押すと、jsonファイルに「id,author,text」が保存され、その文字が画面上に表示されるというものです。初期登録されているjsonデータは読み取れているのですが、保存がうまくいかない状態です。

console.logなどを追って確認しているのですが、原因がわからず困り果てています。
ご指導ご鞭撻お願いできないでしょうか。

html
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>Sample</title>
6<script src="https://npmcdn.com/react@15.3.0/dist/react.min.js"></script>
7<script src="https://npmcdn.com/react-dom@15.3.0/dist/react-dom.min.js"></script>
8<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
9<script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.6.2/remarkable.min.js"></script>
10<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
11<script src="src/script.js" type="text/babel"></script>
12</head>
13<body>
14	<div id="content"></div>
15</body>
16</html>

javascript
1// script.js
2var CommentBox = React.createClass({
3	getInitialState: function() {
4		console.log("CommentBox :getInitialState通過");
5		return {data: []};
6	},
7	componentDidMount: function() {
8		console.log("CommentBox :componentDidMount通過");
9		$.ajax({
10			url: this.props.url,
11			dataType: 'json',
12			cache: false,
13			success: function(data) {
14				this.setState({data: data});
15			}.bind(this),
16			error: function(xhr, status, error) {
17				console.error(this.props.url, status, error.toString());
18			}.bind(this)
19		});
20	},
21	handleCommentSubmit: function(comment) {
22		console.log("CommentBox :handleCommentSubmit通過");
23		$.ajax({
24			url: this.props.url,
25			dataType: 'json',
26			type: 'POST',
27			data: comment,
28			success: function(data) {
29				console.log(comment);
30				console.log(data)
31				this.setState({data: data});
32			}.bind(this),
33			error: function(xhr, status, error) {
34				console.error(this.props.url, status, error.toString());
35			}.bind(this)
36		});
37	},
38	render: function() {
39		console.log("CommentBox ：render通過");
40		return (
41			<div className="commentBox">
42				<h1>コメント</h1>
43				<CommentList data={this.state.data} />
44				<CommentForm onCommentSubmit={this.handleCommentSubmit} />
45			</div>
46		);
47	}
48});
49var CommentList = React.createClass({
50	render: function() {
51		console.log("CommentList：render通過");
52		var commentNodes = this.props.data.map(function(comment) {
53			console.log("CommentList：commentNodes通過");
54			return (
55				<Comment author={comment.author} key={comment.id}>
56				{comment.text}
57				</Comment>
58			);
59		});
60		return (
61			<div className="commentList">
62			{commentNodes}
63			</div>
64		);
65	}
66});
67var Comment = React.createClass({
68	render: function() {
69		console.log("Comment    ：render通過");
70		return (
71			<div className="comment">
72				<h2 className="commentAuthor">
73				{this.props.author}
74				</h2>
75				{this.props.children}
76			</div>
77		);
78	}
79});
80var CommentForm = React.createClass({
81	getInitialState: function() {
82		console.log("CommentForm：getInitialState通過");
83		return {author: '', text: ''};
84	},
85	handleChange: function(eventObject) {
86		console.log("CommentForm：handleChange通過");
87		var state = {};
88		state[eventObject.target.id] = eventObject.target.value;
89		this.setState(state);
90	},
91	handleSubmit: function(eventObject) {
92		console.log("CommentForm：handleSubmit通過");
93		eventObject.preventDefault();
94		var author = this.state.author.trim();
95		var text = this.state.text.trim();
96		if (!author || !text) {
97			alert("入力してください");
98			return;
99		}
100		this.props.onCommentSubmit({author: author, text: text});
101		this.setState({author: '', text: ''});
102	},
103	render: function() {
104		console.log("CommentForm：render通過");
105		return (
106			<form className="commentForm" onSubmit={this.handleSubmit}>
107				<input
108					type="text"
109					id="author"
110					placeholder="名前"
111					value={this.state.author}
112					onChange={this.handleChange}
113				/>
114				<input
115					type="text"
116					id="text"
117					placeholder="コメントを入力"
118					value={this.state.text}
119					onChange={this.handleChange}
120				/>
121				<input type="submit" value="送信" />
122			</form>
123		);
124	}
125});
126console.log("ReactDOM.render通過");
127ReactDOM.render(
128	<CommentBox url="…localhost/reacttest/demo5/comment.json" />,
129	document.getElementById('content')
130);

json
1[
2	{
3		"id": 1633374400000,
4        "author": "テスト太郎",
5        "text": "表示データ"
6	}
7]

行動規範の内容に同意します

回答1件

ベストアンサー

どこまでうまくいっているのか確認しましょう。

可能性としては、AjaxでPOSTでデータを送るまでにデータがちゃんとできてない可能性です。データを送っている$.ajax(...の手前でcommentの中身が想定通りが確認してみてください。
次はサーバー側が動いていない場合です。その前の前のページ「React入門 03」の所でserver.jsというのを用意したと思います。それがきちんと動いているか確認してみてください。同じように、POSTを受け取った処理の所で、データが想定通りなのかを確認するといいでしょう。

もし、1.がうまくいっているのであれば、server.jsがおかしい可能性が高いです。経験上、react-tutorialにあるserver.jsが壊れて動かなかったときもあります(Node.jsとのバージョン違いとかで駄目だったらしい)。server.jsのなかみやNode.jsのバージョンもわかれば、何かわかるかもしれません。

投稿2017/01/31 11:19