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;
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/11/21 02:31
2018/11/21 02:45
2018/11/21 02:53