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の処理だけうまくいっていないようです。
情報に不足がありましたらご指摘ください。追記させていただきます。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。