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

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

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

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

React.js

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

Q&A

解決済

1回答

7073閲覧

【React】Uncaught TypeError: this.props.onDelete is not a function

ta539tg70

総合スコア20

Ruby on Rails 5

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

React.js

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

0グッド

0クリップ

投稿2018/11/21 01:59

Rails+Reactで練習にツイッターもどきを制作しています。本物のツイッターのように、自分のツイートの一覧が表示されつつ、ツイートごとに削除ボタンがついているものを想定しています。そこで、ツイート一覧は問題なく表示できたのですが、削除ボタンの実装で詰まってしまっています。現状だとUncaught TypeError: this.props.onDelete is not a functionとエラーが出てしまっているのですが、どこをどう直したらいいのか全く分かりません。どなたかご教示ください。よろしくお願いします!

Tweet.js

React

1import React from 'react' 2 3class Tweet extends React.Component { 4 constructor(props) { 5 super(props); 6 this.state = { 7 tweet: this.props.tweet, 8 id: this.props.id, 9 }; 10 this.handleDelete = this.handleDelete.bind(this); 11 } 12 handleDelete(id) { 13 this.props.onDelete(id); 14 } 15 render() { 16 const tweet = this.state.tweet; 17 return ( 18 <div> 19 <p>{tweet.user.user_name} {tweet.created_at}</p> 20 <p>{tweet.tweet}</p> 21 <button onClick={this.handleDelete(tweet.id)}>削除</button> 22 </div> 23 ); 24 } 25} 26 27export default Tweet;

Tweets.js

React

1import React from 'react' 2import Tweet from './Tweet' 3 4class Tweets extends React.Component { 5 constructor(props) { 6 super(props); 7 this.state = { 8 tweet: this.props.tweet, 9 id: this.props.id, 10 }; 11 } 12 render() { 13 const tweets = this.props.tweets.map(function (tweet) { 14 return <Tweet tweet={tweet} key={tweet.id} />; 15 }); 16 return ( 17 <div> 18 {tweets} 19 </div> 20 ); 21 } 22} 23 24export default Tweets;

TweetsPage.js

React

1import React from 'react' 2import Tweets from './Tweets' 3 4class TweetsPage extends React.Component { 5 constructor() { 6 super(); 7 this.state = { 8 tweets: [], 9 id: '', 10 }; 11 this.onSubmitDelete = this.onSubmitDelete.bind(this); 12 } 13 loadTweetsFromServer() { 14 const url = '/tweets/index.json'; 15 $.ajax({ 16 url: url, 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 onSubmitDelete(id) { 31 const url = '/tweets/destroy'; 32 $.ajax({ 33 url: url, 34 type: 'POST', 35 cache: false, 36 data: { 37 id: id 38 }, 39 success: (data) => { 40 this.loadTweetsFromServer(); 41 }, 42 error: (xhr, status, err) => { 43 console.error(url, status, err.toString()); 44 }, 45 }); 46 } 47 componentDidMount() { 48 this.loadTweetsFromServer(); 49 } 50 render() { 51 return ( 52 <div> 53 <Tweets tweets={this.state.tweets} onDelete={this.onSubmitDelete} /> 54 </div> 55 ); 56 } 57} 58 59export default TweetsPage;

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

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

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

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

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

guest

回答1

0

ベストアンサー

エラーメッセージのとおりで、this.props.onDeleteが関数ではありません。

本来、onDeletepropsとして上位コンポーネントから渡すべきところ、<Tweet tweet={tweet} key={tweet.id} />と渡していないので、onDeleteundefinedとなって処理できていません。

投稿2018/11/21 02:15

maisumakun

総合スコア145121

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

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

ta539tg70

2018/11/21 02:31

ご指摘のように<Tweet tweet={tweet} key={tweet.id} onDelete={this.props.onDelete} />としましたが、今度は"Uncaught TypeError: Cannot read property 'props' of undefined"と出てしまいました。これはどうしたらいいのでしょうか...。
maisumakun

2018/11/21 02:45

mapの中で使っている関数がfunction()なために、thisがセットされていません。アロー関数で書き直すか、mapに入る前に「const onDelete = this.props.onDelete」などのように取得しておくなどしましょう。
ta539tg70

2018/11/21 02:53

「const onDelete = this.props.onDelete」とした上でonDelete={onDelete}とすることで直りました。ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問