質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

2回答

595閲覧

【Rails+React+jQuery】POST送信時のエラー

ta539tg70

総合スコア20

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

POST

POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2018/11/18 14:31

React初心者なので、練習でTwitterもどきを作っています。
ツイート一覧表示まではうまくできたのですが、新規投稿のPOST送信で詰まっています。

「送信」を押すとChromeのconsoleタブでは以下2つエラーが出ており、
・POST http://localhost:3000/tweets/create 400 (Bad Request)
・Uncaught ReferenceError: url is not defined

ターミナルのログには次の表記があります。
・ActionController::ParameterMissing (param is missing or the value is empty: tweet):

どうしてurlに400エラーが出ていてnot definedとされてしまっているのか&どうしたらうまくパラメータが渡せるのか...今日一日調べ続けていたのですが、どちらも解決に至る答えが見つかりませんでした。もうほんとに心が折れてしまいそうで...どなたかご教示ください。よろしくお願いします...!

コードは下記の通りです。

▼TweetsPage.js

React

1import React from 'react' 2import NewTweet from './NewTweet' 3import Tweets from './Tweets' 4 5class TweetsPage extends React.Component { 6 constructor() { 7 super(); 8 this.state = { 9 tweets: [], 10 tweet: '', 11 }; 12 this.onSubmit2 = this.onSubmit2.bind(this); 13 } 14 loadTweetsFromServer() { 15 $.ajax({ 16 url: 'http://localhost:3000/tweets/index.json', 17 dataType: 'json', 18 type: 'GET', 19 cache: false, 20 success: (data) => { 21 this.setState({ 22 tweets: data 23 }); 24 }, 25 error: (xhr, status, err) => { 26 console.error(url, status, err.toString()); 27 }, 28 }); 29 } 30 onSubmit2(value) { 31 console.log(value) 32 $.ajax({ 33 url: 'http://localhost:3000/tweets/create', 34 dataType: 'json', // そもそもjsonで良いのか自信なし 35 type: 'POST', 36 cache: false, 37 data: { 38 tweet: this.state.tweet 39 }, 40 success: (data) => { 41 this.loadTweetsFromServer(); // 一覧再描画 42 }, 43 error: (xhr, status, err) => { 44 console.error(url, status, err.toString()); 45 }, 46 }); 47 } 48 componentDidMount() { 49 this.loadTweetsFromServer(); 50 } 51 render() { 52 return ( 53 <div> 54 <NewTweet onSubmit1={this.onSubmit2} /> 55 <Tweets tweets={this.state.tweets} /> 56 </div> 57 ); 58 } 59} 60 61export default TweetsPage;

▼NewTweet.js

React

1import React from 'react' 2 3class NewTweet extends React.Component { 4 constructor(props) { 5 super(props); 6 this.state = { 7 tweet: '' 8 }; 9 this.getInput = this.getInput.bind(this); 10 this.onSubmit = this.onSubmit.bind(this); 11 } 12 getInput(e) { 13 this.setState({ 14 tweet: e.target.value 15 }); 16 } 17 onSubmit() { 18 this.props.onSubmit1(this.state.tweet); 19 } 20 render() { 21 return ( 22 <div> 23 <textarea onChange={this.getInput}></textarea> 24 <button onClick={this.onSubmit}>送信</button> 25 </div> 26 ); 27 } 28} 29 30export default NewTweet;

▼tweets_controller.rb

Rails

1 def create 2 tweet = Tweet.new(create_params) 3 tweet.user_id = current_user.id 4 tweet.save 5 end 6 7 private 8 def create_params 9 params.require(:tweet).permit(:user_id, :tweet) 10 end

▼config/routs.rb

Rails

1 get 'tweets/index' => 'tweets#index' 2 post 'tweets/create' => 'tweets#create'

このような感じで、TweetsPageをindex.html.erb内のreact_componentで呼び出しています。
※TweetsPageでTweetsもimportしていますが、そちらは問題なく動いているため省略します。

TweetPage.jsのonSubmit2内のconsole.logの中身は想定通りの値(入力した文字列)をきちんと受け取れていますので、POSTの処理だけうまくいっていないようです。
情報に不足がありましたらご指摘ください。追記させていただきます。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

ストロングパラメータで値を受け取るのを断念し、

Rails

1tweet = Tweet.new(user_id: current_user.id, tweet: params[:tweet])

とした上で、さらにonSubmit2内のdata: { tweet: this.state.tweet }data: { tweet: value }にすることで一応は解決できました。

ストロングパラメータでの受け取りを維持したままの方法をご存知の方がいらっしゃいましたらコメントいただけますと幸いです。

投稿2018/11/19 00:54

ta539tg70

総合スコア20

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

params.require(:tweet)となっている以上、送信するパラメーターはtweet[tweet]のようなnameを振る必要があります。

投稿2018/11/18 22:42

maisumakun

総合スコア145123

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ta539tg70

2018/11/19 00:15 編集

ご回答ありがとうございます。ただ、data: tweet[tweet]と試してみても解決せず、調べてみても分からなかったので、私のコードの場合は具体的にどこにどのように記述すれば良いのかご教示いただけますと幸いです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問