質問編集履歴

5

microposts_controller\.rbを追記

2017/01/17 12:17

投稿

solt0723
solt0723

スコア67

test CHANGED
File without changes
test CHANGED
@@ -542,86 +542,6 @@
542
542
 
543
543
  中略
544
544
 
545
-
546
-
547
- <li id="micropost-377">
548
-
549
- <button class="btn-old-micropost">
550
-
551
- <span class="content">
552
-
553
- ててて
554
-
555
-
556
-
557
- </span>
558
-
559
- <span class="timestamp">
560
-
561
- Posted 3 days ago.
562
-
563
- </span>
564
-
565
- </button>
566
-
567
- </li>
568
-
569
-
570
-
571
-
572
-
573
- 中略
574
-
575
-
576
-
577
-
578
-
579
- <!-- <form class="new_micropost" id="new_micropost" enctype="multipart/form-data" action="/microposts" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="vvuS1FJiYVwCMOusHRscYXar2GxZDCMWhRbDkThP4ZyL9FOsoVrVXj5fl6WCZ4LCsLevKALMO33RCkdBJ8yWDQ==" />
580
-
581
-
582
-
583
- <div class="field">
584
-
585
- <textarea placeholder="Compose new micropost..." name="micropost[content]" id="micropost_content">
586
-
587
- </textarea>
588
-
589
- </div>
590
-
591
-
592
-
593
- <input type="submit" name="commit" value="creat" class="btn-post" />
594
-
595
-
596
-
597
- <span class="picture">
598
-
599
- <input accept="image/jpeg.iamge/gif,image/png" type="file" name="micropost[picture]" id="micropost_picture" />
600
-
601
- </span>
602
-
603
- </form> -->
604
-
605
-
606
-
607
- <!-- <script type="text/javascript">
608
-
609
- $('#micropost_picture').bind('change', function() {
610
-
611
- var size_in_megabytes = this.files[0].size/1024/1024;
612
-
613
- if (size_in_megabytes > 5) {
614
-
615
- alert('Maximum file size is 5MB. Please choose a smaller file.');
616
-
617
- }
618
-
619
- });
620
-
621
- </script> -->
622
-
623
-
624
-
625
545
  </section>
626
546
 
627
547
  <div data-react-class="MessageBox" data-react-props="{}"></div>
@@ -703,3 +623,91 @@
703
623
 
704
624
 
705
625
  よろしくお願いします。
626
+
627
+
628
+
629
+ ###さらにさらに追記 1/17(2)
630
+
631
+ micropostsのcontrollerは下記のようになっています。
632
+
633
+
634
+
635
+ ```
636
+
637
+ class MicropostsController < ApplicationController
638
+
639
+ before_action :logged_in_user, only: [:create, :destroy, :show]
640
+
641
+ before_action :set_micropost, only: [:destroy, :show]
642
+
643
+
644
+
645
+ def create
646
+
647
+ @micropost = current_user.microposts.build(micropost_params)
648
+
649
+ if @micropost.save
650
+
651
+ flash[:success] = "Micropost created!"
652
+
653
+ redirect_to home_path
654
+
655
+ else
656
+
657
+ @feed_items = []
658
+
659
+ render 'static_pages/home'
660
+
661
+ end
662
+
663
+ end
664
+
665
+
666
+
667
+ def destroy
668
+
669
+ @micropost.destroy
670
+
671
+ flash[:success] = "Micropost deleted"
672
+
673
+ redirect_to request.referrer || home_path
674
+
675
+ end
676
+
677
+
678
+
679
+ def show
680
+
681
+ messages = Micropost.find(params[:id])
682
+
683
+ render json: messages
684
+
685
+ end
686
+
687
+
688
+
689
+ private
690
+
691
+
692
+
693
+ def micropost_params
694
+
695
+ params.require(:micropost).permit(:content, :picture)
696
+
697
+ end
698
+
699
+
700
+
701
+ def set_micropost
702
+
703
+ @micropost = current_user.microposts.find_by(id: params[:id])
704
+
705
+ redirect_to home_path if @micropost.nil?
706
+
707
+ end
708
+
709
+ end
710
+
711
+
712
+
713
+ ```

4

console\.logの確認結果を追記

2017/01/17 12:17

投稿

solt0723
solt0723

スコア67

test CHANGED
File without changes
test CHANGED
@@ -48,79 +48,285 @@
48
48
 
49
49
  Parameters: {"micropost"=>{"content"=>"POST"}}
50
50
 
51
- User Load (0.2ms) SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT 1 [["id", 103]]
52
-
53
- (0.1ms) begin transaction
54
-
55
- SQL (0.4ms) INSERT INTO "microposts" ("content", "user_id", "created_at", "updated_at") VALUES (?, ?, ?, ?) [["content", "POST"], ["user_id", 103], ["created_at", "2017-01-15 08:20:21.208603"], ["updated_at", "2017-01-15 08:20:21.208603"]]
56
-
57
- (8.9ms) commit transaction
51
+ User Load (0.2ms) SELECT "users".* FROM "users" WHERE
52
+
53
+
54
+
55
+ 中略
56
+
57
+
58
+
59
+ Completed 302 Found in 16ms (ActiveRecord: 9.5ms)
60
+
61
+ ```
62
+
63
+
64
+
65
+ ただ、上記のように投稿後に表示する部分がうまくいかず、下記のスクリーンショットのような表示となってしまいます。
66
+
67
+ 本当は、ここでテキストフォームと「MessageBox」というテキストの間に投稿した内容を表示したいです!!
68
+
69
+
70
+
71
+ ![イメージ説明](094f043a15caf85fddce72055d7baa20.png)
72
+
73
+
74
+
75
+
76
+
77
+ ###該当のソースコード
78
+
79
+ reactで投稿する実装は、下記のサイトを参考にしています
80
+
81
+ http://ruby-rails.hatenadiary.com/entry/20151122/1448118932
82
+
83
+
84
+
85
+ まず、テキストフォームを生成して、POSTする内容を受け取るコードは次のようになっています。
86
+
87
+ ```javascript
88
+
89
+ var MessageForm = React.createClass({
90
+
91
+ handleSubmit: function(event) {
92
+
93
+ event.preventDefault();
94
+
95
+ var user = this.refs.user.value.trim();
96
+
97
+ // 親コンポーネントのMessageBocのイベントを呼び出す
98
+
99
+ this.props.onMessageSubmit( user );
100
+
101
+ // フォームの内容を削除
102
+
103
+ this.refs.user.value = '';
104
+
105
+ },
106
+
107
+
108
+
109
+ // 投稿用のフォームを作成して、'user'として内容を受け取る
110
+
111
+ render: function() {
112
+
113
+ return (
114
+
115
+ <form className="commentForm" onSubmit={this.handleSubmit}>
116
+
117
+ <input type="text" placeholder="Title" ref='user'/>
118
+
119
+ <input type="submit" value="Post" />
120
+
121
+ </form>
122
+
123
+ );
124
+
125
+ }
126
+
127
+ });
128
+
129
+
130
+
131
+ ```
132
+
133
+
134
+
135
+ 次に、上記のコードから投稿する内容を受取、AjaxでPOSTするコードが以下のようになっています。
136
+
137
+
138
+
139
+ ```javascript
140
+
141
+ var MessageBox = React.createClass({
142
+
143
+ getInitialState: function() {
144
+
145
+ // isLoading = true : ロード中を表示
146
+
147
+ return { messages: [], isLoading: true };
148
+
149
+ },
150
+
151
+
152
+
153
+ ...中略
154
+
155
+
156
+
157
+ // 投稿の内容をAjaxでPOST
158
+
159
+ handleMessageSubmit: function(message) {
160
+
161
+ $.ajax({
162
+
163
+ url: 'microposts',
164
+
165
+ datatype: 'json',
166
+
167
+ type: 'POST',
168
+
169
+ beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))},
170
+
171
+ data: {
172
+
173
+ micropost: { content: message }
174
+
175
+ },
176
+
177
+ success: function(message) {
178
+
179
+ var newMessages = this.state.messages.concat(message);
180
+
181
+ this.setState({ messages: newMessages });
182
+
183
+ }.bind(this),
184
+
185
+ error: function(_xhr, status, err) {
186
+
187
+ console.error(this.props.url, status, err.toString());
188
+
189
+ }.bind(this)
190
+
191
+ });
192
+
193
+ },
194
+
195
+
196
+
197
+ render: function() {
198
+
199
+ var messageItems = this.state.messages.map(function(message) {
200
+
201
+ return (
202
+
203
+ <MessageItem key={message.id} message={message}/>
204
+
205
+ );
206
+
207
+ });
208
+
209
+
210
+
211
+ // ボタンがクリックされた時に、投稿する内容を受け取ってhandleMessageSubmitに渡す
212
+
213
+ return (
214
+
215
+ <div>
216
+
217
+ <h1>Message Box</h1>
218
+
219
+ <div className="messageBox">
220
+
221
+ {messageItems}
222
+
223
+ <MessageForm onMessageSubmit={this.handleMessageSubmit}/>
224
+
225
+ </div>
226
+
227
+ </div>
228
+
229
+ );
230
+
231
+ }
232
+
233
+ });
234
+
235
+
236
+
237
+ ```
238
+
239
+
240
+
241
+ 最後に、投稿した内容を表示するためのコードが下記のようになっています。
242
+
243
+
244
+
245
+ ```javascript
246
+
247
+ var MessageItem = React.createClass ({
248
+
249
+ render: function() {
250
+
251
+ return (
252
+
253
+ <div className="message">
254
+
255
+ <h2 className="messageUser">{this.props.message.user}</h2>
256
+
257
+ </div>
258
+
259
+ );
260
+
261
+ }
262
+
263
+ });
264
+
265
+ ```
266
+
267
+ 必要な情報などあれば、いっていただけると助かります。
268
+
269
+
270
+
271
+
272
+
273
+ ###追記
274
+
275
+
276
+
277
+ 編集依頼にいただいた内容ですが、handleMessageSubmitが実行された際には、下記のサーバーログが残っていました。
278
+
279
+
280
+
281
+ ```
282
+
283
+ Started POST "/microposts" for ::1 at 2017-01-16 19:48:46 +0900
284
+
285
+ Processing by MicropostsController#create as */*
286
+
287
+ Parameters: {"micropost"=>{"content"=>"サンプル"}}
288
+
289
+ User Load (1.0ms) SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT 1 [["id", 103]]
290
+
291
+ (0.5ms) begin transaction
292
+
293
+ SQL (3.0ms) INSERT INTO "microposts" ("content", "user_id", "created_at", "updated_at") VALUES (?, ?, ?, ?) [["content", "サンプル"], ["user_id", 103], ["created_at", "2017-01-16 10:48:46.294594"], ["updated_at", "2017-01-16 10:48:46.294594"]]
294
+
295
+ (0.9ms) commit transaction
58
296
 
59
297
  Redirected to http://localhost:3000/home
60
298
 
61
- Completed 302 Found in 16ms (ActiveRecord: 9.5ms)
299
+ Completed 302 Found in 59ms (ActiveRecord: 5.5ms)
62
-
300
+
63
- ```
301
+ ```
64
-
65
-
66
-
67
- ただ、上記のように投稿後に表示する部分がうまくいかず、下記のスクリーンショットのような表示となってしまいます。
302
+
68
-
69
- 本当は、ここでテキストフォームと「MessageBox」というテキストの間に投稿した内容を表示したいです!!
303
+
70
-
71
-
72
-
73
- ![イメージ説明](094f043a15caf85fddce72055d7baa20.png)
304
+
74
-
75
-
76
-
77
-
78
-
79
- ###該当のソースコード
80
-
81
- react投稿る実装は下記サイトを参考にています
305
+ 302が返ってきているようなのですこれが問題なょうか、、
82
-
83
- http://ruby-rails.hatenadiary.com/entry/20151122/1448118932
306
+
84
-
85
-
86
-
307
+
308
+
309
+
310
+
87
- まずテキストフォーム生成し、POSTす内容を受け取るコードは次のようています。
311
+ もう1点MessageItemの動き調べ気づいた点があたので記載します。
312
+
313
+
314
+
88
-
315
+ まず、MessageItemが呼び出されていないかも、と思ったので、MessageItemメソッドの中身を
316
+
89
- ```javascript
317
+ ```
90
-
318
+
91
- var MessageForm = React.createClass({
319
+ var MessageItem = React.createClass ({
92
-
93
- handleSubmit: function(event) {
94
-
95
- event.preventDefault();
96
-
97
- var user = this.refs.user.value.trim();
98
-
99
- // 親コンポーネントのMessageBocのイベントを呼び出す
100
-
101
- this.props.onMessageSubmit( user );
102
-
103
- // フォームの内容を削除
104
-
105
- this.refs.user.value = '';
106
-
107
- },
108
-
109
-
110
-
111
- // 投稿用のフォームを作成して、'user'として内容を受け取る
112
320
 
113
321
  render: function() {
114
322
 
115
323
  return (
116
324
 
325
+ <div className="message">
326
+
117
- <form className="commentForm" onSubmit={this.handleSubmit}>
327
+ <h2 className="messageUser">{this.props.message.user}</h2>
118
-
119
- <input type="text" placeholder="Title" ref='user'/>
328
+
120
-
121
- <input type="submit" value="Post" />
122
-
123
- </form>
329
+ </div>
124
330
 
125
331
  );
126
332
 
@@ -128,103 +334,23 @@
128
334
 
129
335
  });
130
336
 
131
-
132
-
133
- ```
337
+ ```
134
-
135
-
136
-
137
- 次に、上記のコードから投稿する内容を受取、AjaxでPOSTするコードが以下のようになっています。
338
+
138
-
139
-
140
-
141
- ```javascript
339
+ 上記から下記に書き換えてみました。
340
+
142
-
341
+ 「サンプル」というテキストを追加しています。
342
+
343
+ ```
344
+
143
- var MessageBox = React.createClass({
345
+ var MessageItem = React.createClass ({
144
-
145
- getInitialState: function() {
146
-
147
- // isLoading = true : ロード中を表示
148
-
149
- return { messages: [], isLoading: true };
150
-
151
- },
152
-
153
-
154
-
155
- ...中略
156
-
157
-
158
-
159
- // 投稿の内容をAjaxでPOST
160
-
161
- handleMessageSubmit: function(message) {
162
-
163
- $.ajax({
164
-
165
- url: 'microposts',
166
-
167
- datatype: 'json',
168
-
169
- type: 'POST',
170
-
171
- beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))},
172
-
173
- data: {
174
-
175
- micropost: { content: message }
176
-
177
- },
178
-
179
- success: function(message) {
180
-
181
- var newMessages = this.state.messages.concat(message);
182
-
183
- this.setState({ messages: newMessages });
184
-
185
- }.bind(this),
186
-
187
- error: function(_xhr, status, err) {
188
-
189
- console.error(this.props.url, status, err.toString());
190
-
191
- }.bind(this)
192
-
193
- });
194
-
195
- },
196
-
197
-
198
346
 
199
347
  render: function() {
200
348
 
201
- var messageItems = this.state.messages.map(function(message) {
202
-
203
- return (
204
-
205
- <MessageItem key={message.id} message={message}/>
206
-
207
- );
208
-
209
- });
210
-
211
-
212
-
213
- // ボタンがクリックされた時に、投稿する内容を受け取ってhandleMessageSubmitに渡す
214
-
215
349
  return (
216
350
 
217
- <div>
218
-
219
- <h1>Message Box</h1>
220
-
221
- <div className="messageBox">
351
+ <div className="message">
222
-
223
- {messageItems}
352
+
224
-
225
- <MessageForm onMessageSubmit={this.handleMessageSubmit}/>
353
+ <h2 className="messageUser">サンプル{this.props.message.user}</h2>
226
-
227
- </div>
228
354
 
229
355
  </div>
230
356
 
@@ -234,164 +360,346 @@
234
360
 
235
361
  });
236
362
 
237
-
238
-
239
- ```
240
-
241
-
242
-
243
- 最後に、投稿した内容を表示するためのコードが下記のようになっています。
244
-
245
-
246
-
247
- ```javascript
248
-
249
- var MessageItem = React.createClass ({
250
-
251
- render: function() {
252
-
253
- return (
254
-
255
- <div className="message">
256
-
257
- <h2 className="messageUser">{this.props.message.user}</h2>
363
+ ```
364
+
365
+
366
+
367
+ ![イメージ説明](fbb1a9fee22f219ed6faed3bdf0c744e.png)
368
+
369
+
370
+
371
+ その後、実際に動かしてみると、Postボタンをタップする前には
372
+
373
+ 上記のスクショのようになっているところ、
374
+
375
+ Postボタンタップ後に下記のスクショのように
376
+
377
+ 「サンプル」というテキストが表示されました。
378
+
379
+
380
+
381
+ ![イメージ説明](7e4a1795703fab56f635b05b0af30f44.png)
382
+
383
+
384
+
385
+ これでMessageItemが呼び出されていることは分かったのですが、
386
+
387
+ 投稿した内容が表示されないというのは
388
+
389
+ MessageItem内の{this.props.message.user}の部分に
390
+
391
+ データがうまく渡っていないのでしょうか。。。
392
+
393
+
394
+
395
+ とりとめのない追記で申し訳ありませんが、見ていただけると大変助かります。
396
+
397
+
398
+
399
+ ###さらに追記 01/17
400
+
401
+ コメントにいただいたように、success:の中でconsole.log(message)を記載してchromeで確認をしました。
402
+
403
+
404
+
405
+ htmlが吐き出されているようで、かなり長いログになっていました。。
406
+
407
+ ※あまりに長いので、一部省略しています。
408
+
409
+
410
+
411
+ ```
412
+
413
+ <!DOCTYPE html>
414
+
415
+ <html>
416
+
417
+ <head>
418
+
419
+ <title>Ruby on Rails Tutorial Sample App</title>
420
+
421
+ <link rel="stylesheet" media="all" href="/assets/account_activations.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
422
+
423
+
424
+
425
+ 中略
426
+
427
+
428
+
429
+ <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
430
+
431
+ </script>
432
+
433
+ <![endif]-->
434
+
435
+
436
+
437
+ </head>
438
+
439
+ <body style="color: rgb(27, 29, 34)">
440
+
441
+ <header class="navbar navbar-inverse">
442
+
443
+ <div class="container" style="margin-top: 100px;">
444
+
445
+ <a id="logo" href="/home">sample app</a>
446
+
447
+ <nav>
448
+
449
+ <ul class="nav navbar-nav navbar-right">
450
+
451
+ <li><a href="/home">Home</a></li>
452
+
453
+ <li><a href="/help">Help</a></li>
454
+
455
+ <li><a href="/users">Users</a></li>
456
+
457
+ <li class="dropdown">
458
+
459
+ <a href="#" class="dropdown-toggle" data-toggle="dropdown">
460
+
461
+ Account <b class="caret"></b>
462
+
463
+ </a>
464
+
465
+ <ul class="dropdown-menu">
466
+
467
+ <li><a href="/users/103">Profile</a></li>
468
+
469
+ <li><a href="#">Settings</a></li>
470
+
471
+ <li class="divider"></li>
472
+
473
+ <li>
474
+
475
+ <a rel="nofollow" data-method="delete" href="/logout">Log out</a>
476
+
477
+ </li>
478
+
479
+ </ul>
480
+
481
+ </li>
482
+
483
+ </ul>
484
+
485
+ </nav>
486
+
487
+ </div>
488
+
489
+ </header>
490
+
491
+
492
+
493
+ <div class="landing">
494
+
495
+ <div class="alert alert-success">Micropost created!</div>
496
+
497
+ <div class="container">
498
+
499
+ <div class="row col-md-12">
500
+
501
+ <h1>
502
+
503
+ <section class="user_info">
504
+
505
+ <a href="/users/103"><img alt="example_sample@example.com" class="gravatar" src="https://secure.gravatar.com/avatar/1a51ab8ceafa101e9b36619b6c9b277d?s=80" /></a>
506
+
507
+ <h1>example_sample@example.com</h1>
508
+
509
+ <span><a href="/users/103">view my profile</a></span>
510
+
511
+ <span>84 microposts</span>
512
+
513
+
514
+
515
+ <div class="stats">
516
+
517
+ <a href="/users/103/following">
518
+
519
+ <a id="following" class="stat">
520
+
521
+ 1
522
+
523
+ following
524
+
525
+ </a>
526
+
527
+ </a>
528
+
529
+ <a href="/users/103/followers">
530
+
531
+ <a id="followers" class="stat">
532
+
533
+ 0
534
+
535
+ followers
536
+
537
+ </a>
538
+
539
+ </a>
540
+
541
+
542
+
543
+ 中略
544
+
545
+
546
+
547
+ <li id="micropost-377">
548
+
549
+ <button class="btn-old-micropost">
550
+
551
+ <span class="content">
552
+
553
+ ててて
554
+
555
+
556
+
557
+ </span>
558
+
559
+ <span class="timestamp">
560
+
561
+ Posted 3 days ago.
562
+
563
+ </span>
564
+
565
+ </button>
566
+
567
+ </li>
568
+
569
+
570
+
571
+
572
+
573
+ 中略
574
+
575
+
576
+
577
+
578
+
579
+ <!-- <form class="new_micropost" id="new_micropost" enctype="multipart/form-data" action="/microposts" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="vvuS1FJiYVwCMOusHRscYXar2GxZDCMWhRbDkThP4ZyL9FOsoVrVXj5fl6WCZ4LCsLevKALMO33RCkdBJ8yWDQ==" />
580
+
581
+
582
+
583
+ <div class="field">
584
+
585
+ <textarea placeholder="Compose new micropost..." name="micropost[content]" id="micropost_content">
586
+
587
+ </textarea>
588
+
589
+ </div>
590
+
591
+
592
+
593
+ <input type="submit" name="commit" value="creat" class="btn-post" />
594
+
595
+
596
+
597
+ <span class="picture">
598
+
599
+ <input accept="image/jpeg.iamge/gif,image/png" type="file" name="micropost[picture]" id="micropost_picture" />
600
+
601
+ </span>
602
+
603
+ </form> -->
604
+
605
+
606
+
607
+ <!-- <script type="text/javascript">
608
+
609
+ $('#micropost_picture').bind('change', function() {
610
+
611
+ var size_in_megabytes = this.files[0].size/1024/1024;
612
+
613
+ if (size_in_megabytes > 5) {
614
+
615
+ alert('Maximum file size is 5MB. Please choose a smaller file.');
616
+
617
+ }
618
+
619
+ });
620
+
621
+ </script> -->
622
+
623
+
624
+
625
+ </section>
626
+
627
+ <div data-react-class="MessageBox" data-react-props="{}"></div>
258
628
 
259
629
  </div>
260
630
 
261
- );
262
-
263
- }
264
-
265
- });
266
-
267
- ```
268
-
269
- 必要な情報などあれば、いっていただけると助かります。
270
-
271
-
272
-
273
-
274
-
275
- ###追記
276
-
277
-
278
-
279
- 編集依頼にいただいた内容ですが、handleMessageSubmitが実行された際には、下記のサーバーログが残っていました。
280
-
281
-
282
-
283
- ```
284
-
285
- Started POST "/microposts" for ::1 at 2017-01-16 19:48:46 +0900
286
-
287
- Processing by MicropostsController#create as */*
288
-
289
- Parameters: {"micropost"=>{"content"=>"サンプル"}}
290
-
291
- User Load (1.0ms) SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT 1 [["id", 103]]
292
-
293
- (0.5ms) begin transaction
294
-
295
- SQL (3.0ms) INSERT INTO "microposts" ("content", "user_id", "created_at", "updated_at") VALUES (?, ?, ?, ?) [["content", "サンプル"], ["user_id", 103], ["created_at", "2017-01-16 10:48:46.294594"], ["updated_at", "2017-01-16 10:48:46.294594"]]
296
-
297
- (0.9ms) commit transaction
298
-
299
- Redirected to http://localhost:3000/home
300
-
301
- Completed 302 Found in 59ms (ActiveRecord: 5.5ms)
302
-
303
- ```
304
-
305
-
306
-
307
- 302が返ってきているようなのですが、これが問題なのでしょうか、、
308
-
309
-
310
-
311
-
312
-
313
- もう1点MessageItemの動き調べている時に気づい点があったので記載します
314
-
315
-
316
-
317
- まず、MessageItemが呼び出されていないかも、と思ったので、MessageItemメソッドの中身を
318
-
319
- ```
320
-
321
- var MessageItem = React.createClass ({
322
-
323
- render: function() {
324
-
325
- return (
326
-
327
- <div className="message">
328
-
329
- <h2 className="messageUser">{this.props.message.user}</h2>
330
-
331
- </div>
332
-
333
- );
334
-
335
- }
336
-
337
- });
338
-
339
- ```
340
-
341
- 上記から下記に書き換えてみました。
342
-
343
- 「サンプル」というテキストを追加しています。
344
-
345
- ```
346
-
347
- var MessageItem = React.createClass ({
348
-
349
- render: function() {
350
-
351
- return (
352
-
353
- <div className="message">
354
-
355
- <h2 className="messageUser">サンプル{this.props.message.user}</h2>
356
-
357
- </div>
358
-
359
- );
360
-
361
- }
362
-
363
- });
364
-
365
- ```
366
-
367
-
368
-
369
- ![イメージ説明](fbb1a9fee22f219ed6faed3bdf0c744e.png)
370
-
371
-
372
-
373
- その後、実際に動かしてみると、Postボタンをタップする前には
374
-
375
- 上記のスクショのようになっているところ、
376
-
377
- Postボタンタップ後に下記のスクショのように
378
-
379
- 「サンプル」というテキストが表示されました。
380
-
381
-
382
-
383
- ![イメージ説明](7e4a1795703fab56f635b05b0af30f44.png)
384
-
385
-
386
-
387
- これでMessageItemが呼び出されていることは分かったのですが、
388
-
389
- 投稿した内容が表示されないというのは
390
-
391
- MessageItem内の{this.props.message.user}の部分に
392
-
393
- データがうまく渡っていないのでしょうか。。。
394
-
395
-
396
-
397
- とりとめのない追記で申し訳ありませんが、見ていただけると大変助かります。
631
+ </div>
632
+
633
+ </div>
634
+
635
+
636
+
637
+ <footer class="footer">
638
+
639
+ <small>
640
+
641
+ The <a href="http://www.railstutorial.org/">Ruby on Rails Tutorial</a>
642
+
643
+ by <a href="http://www.michaelhartl.com/">Michael Hartl</a>
644
+
645
+ </small>
646
+
647
+ <nav>
648
+
649
+ <ul>
650
+
651
+ <li><a href="/about">About</a></li>
652
+
653
+ <li><a href="/contact">Contact</a></li>
654
+
655
+ <li><a href="http://news.railstutorial.org/">News</a></li>
656
+
657
+ </ul>
658
+
659
+ </nav>
660
+
661
+ </footer>
662
+
663
+
664
+
665
+ <pre class="debug_dump">--- !ruby/hash:ActionController::Parameters
666
+
667
+ controller: static_pages
668
+
669
+ action: home
670
+
671
+ </pre>
672
+
673
+ </div>
674
+
675
+ </body>
676
+
677
+ </html>
678
+
679
+ ```
680
+
681
+
682
+
683
+ またchromeのconsoleをみると、もう一つエラーが表示されていました。
684
+
685
+
686
+
687
+ ```
688
+
689
+ micropost.self-560a548….js?body=1:19 undefined "parsererror" "SyntaxError: Unexpected token < in JSON at position 0"
690
+
691
+ ```
692
+
693
+ コードの該当部分は、POSTのajax内のerror:、下記の部分のようです。
694
+
695
+
696
+
697
+ ```
698
+
699
+ console.error(this.props.url, status, err.toString());
700
+
701
+ ```
702
+
703
+
704
+
705
+ よろしくお願いします。

3

誤字修正

2017/01/17 11:24

投稿

solt0723
solt0723

スコア67

test CHANGED
File without changes
test CHANGED
@@ -304,7 +304,7 @@
304
304
 
305
305
 
306
306
 
307
- 302がってきているようなのですが、これは挙動できに問題のでしょうか、、
307
+ 302がってきているようなのですが、これ問題なのでしょうか、、
308
308
 
309
309
 
310
310
 

2

サーバーログと、新たに気付いた点を追記

2017/01/16 11:02

投稿

solt0723
solt0723

スコア67

test CHANGED
File without changes
test CHANGED
@@ -267,3 +267,131 @@
267
267
  ```
268
268
 
269
269
  必要な情報などあれば、いっていただけると助かります。
270
+
271
+
272
+
273
+
274
+
275
+ ###追記
276
+
277
+
278
+
279
+ 編集依頼にいただいた内容ですが、handleMessageSubmitが実行された際には、下記のサーバーログが残っていました。
280
+
281
+
282
+
283
+ ```
284
+
285
+ Started POST "/microposts" for ::1 at 2017-01-16 19:48:46 +0900
286
+
287
+ Processing by MicropostsController#create as */*
288
+
289
+ Parameters: {"micropost"=>{"content"=>"サンプル"}}
290
+
291
+ User Load (1.0ms) SELECT "users".* FROM "users" WHERE "users"."id" = ? LIMIT 1 [["id", 103]]
292
+
293
+ (0.5ms) begin transaction
294
+
295
+ SQL (3.0ms) INSERT INTO "microposts" ("content", "user_id", "created_at", "updated_at") VALUES (?, ?, ?, ?) [["content", "サンプル"], ["user_id", 103], ["created_at", "2017-01-16 10:48:46.294594"], ["updated_at", "2017-01-16 10:48:46.294594"]]
296
+
297
+ (0.9ms) commit transaction
298
+
299
+ Redirected to http://localhost:3000/home
300
+
301
+ Completed 302 Found in 59ms (ActiveRecord: 5.5ms)
302
+
303
+ ```
304
+
305
+
306
+
307
+ 302が帰ってきているようなのですが、これは挙動できに問題となるのでしょうか、、
308
+
309
+
310
+
311
+
312
+
313
+ もう1点、MessageItemの動きを調べている時に気づいた点があったので記載します。
314
+
315
+
316
+
317
+ まず、MessageItemが呼び出されていないかも、と思ったので、MessageItemメソッドの中身を
318
+
319
+ ```
320
+
321
+ var MessageItem = React.createClass ({
322
+
323
+ render: function() {
324
+
325
+ return (
326
+
327
+ <div className="message">
328
+
329
+ <h2 className="messageUser">{this.props.message.user}</h2>
330
+
331
+ </div>
332
+
333
+ );
334
+
335
+ }
336
+
337
+ });
338
+
339
+ ```
340
+
341
+ 上記から下記に書き換えてみました。
342
+
343
+ 「サンプル」というテキストを追加しています。
344
+
345
+ ```
346
+
347
+ var MessageItem = React.createClass ({
348
+
349
+ render: function() {
350
+
351
+ return (
352
+
353
+ <div className="message">
354
+
355
+ <h2 className="messageUser">サンプル{this.props.message.user}</h2>
356
+
357
+ </div>
358
+
359
+ );
360
+
361
+ }
362
+
363
+ });
364
+
365
+ ```
366
+
367
+
368
+
369
+ ![イメージ説明](fbb1a9fee22f219ed6faed3bdf0c744e.png)
370
+
371
+
372
+
373
+ その後、実際に動かしてみると、Postボタンをタップする前には
374
+
375
+ 上記のスクショのようになっているところ、
376
+
377
+ Postボタンタップ後に下記のスクショのように
378
+
379
+ 「サンプル」というテキストが表示されました。
380
+
381
+
382
+
383
+ ![イメージ説明](7e4a1795703fab56f635b05b0af30f44.png)
384
+
385
+
386
+
387
+ これでMessageItemが呼び出されていることは分かったのですが、
388
+
389
+ 投稿した内容が表示されないというのは
390
+
391
+ MessageItem内の{this.props.message.user}の部分に
392
+
393
+ データがうまく渡っていないのでしょうか。。。
394
+
395
+
396
+
397
+ とりとめのない追記で申し訳ありませんが、見ていただけると大変助かります。

1

分かりやすくアップデート

2017/01/16 10:59

投稿

solt0723
solt0723

スコア67

test CHANGED
@@ -1 +1 @@
1
- Railsアプリ内のreactでPOSTした内容を表示したい
1
+ RailsアプリreactでPOSTした内容を表示したい
test CHANGED
@@ -26,7 +26,7 @@
26
26
 
27
27
 
28
28
 
29
- このスクリーンショット内の、ボックの「POST」というテキストを
29
+ このスクリーンショット内の、テキトフォームの「POST」というテキストを
30
30
 
31
31
  POSTボタンがクリックされた後にテキストフォームの上あたりに表示したいのですが
32
32