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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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

Q&A

1回答

2276閲覧

Uncaught TypeError: this.setState is not a functionを解決したい

kita_morio

総合スコア18

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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

0グッド

2クリップ

投稿2019/04/13 02:24

前提・実現したいこと

Uncaught TypeError: this.setState is not a functionを解決したい

調べた見たところbindをすればいいとあり、書いてみましたが動きませんでした。
this.addBook = this.addBook.bind(this);

https://www.amelt.net/imc/programming/javascript-programming/4959/

発生している問題・エラーメッセージ

Uncaught TypeError: this.setState is not a function

該当のソースコード

javascript

1import React, {Component} from 'react' 2import ReactDOM from 'react-dom' 3import PropTypes from 'prop-types' 4import './index.css' 5 6class MoneyBook extends Component { 7 constructor(props){ 8 super(props); 9 this.state = {books:[]}; 10 this.addBook = this.addBook.bind(this); 11 } 12 componentDidMount (){ 13 this.setState = ({books:[ 14 {date:"12/1",item:"うどん", amount:"10000" }, 15 {date:"12/1",item:"うどん", amount:"-30000" }, 16 {date:"12/1",item:"うどん", amount:"-5000" }, 17 {date:"12/1",item:"うどん", amount:"33000" }, 18 ]}) 19 } 20 addBook(date,item,amount) { 21 const book = { date: date, item:item, amount:amount} 22 this.setState({books: this.state.books.concat(book)}) 23 } 24 render(){ 25 return ( 26 <div> 27 <h1>小遣い</h1> 28 <MoneyBookList books={this.state.books}/> 29 <MoneyEntry add={(date,item,amount) =>this.addBook(date,item,amount)}/> 30 </div> 31 ); 32 } 33} 34class MoneyEntry extends Component{ 35 constructor(props){ 36 super(props); 37 this.state = {date:'', item:'', amount:'',payingIn:true}; 38 } 39 onChangeDate(event){ 40 this.setState({date: event.target.value}) 41 } 42 onChangeItem(event){ 43 this.setState({item: event.target.value}) 44 } 45 onChangeAmount(event){ 46 this.setState({amount: event.target.value}) 47 } 48 onChangePayingIn(event){ 49 this.setState({payingIn: event.target.value == 'on'}) 50 } 51 onClickSubmit(){ 52 this.props.add(this.state.date,this.state.item,this.state.amount * (this.state.payingIn ? 1 :-1)) 53 this.setState({date:'', item:'', amount:'',payingIn:false}) 54 } 55 render(){ 56 return( 57 <div className="entry"> 58 <fieldset> 59 <legend>記帳</legend> 60 <div> 61 <input type="radio" value="on" checked={this.state.payingIn} onChange={(event) =>this.onChangePayingIn(event)}/>入金 62 <input type="radio" value="off" checked={!this.state.payingIn} onChange={(event) =>this.onChangePayingIn(event)}/>出金 63 </div> 64 <div> 65 <input type="text" value={this.state.date} onChange={(evnet) => this.onChangeDate(evnet)} />日付 66 <input type="text" value={this.state.item} onChange={(evnet) => this.onChangeItem(evnet)} />項目 67 <input type="number" value={this.state.amount} onChange={(evnet) => this.onChangeAmount(evnet)} />金額 68 </div> 69 <div> 70 <input type="submit" name="" onClick={() =>this.onClickSubmit()}/>追加 71 </div> 72 </fieldset> 73 </div> 74 ) 75 } 76} 77MoneyEntry.propTypes = { 78 add: PropTypes.func.isRequired 79} 80const MoneyBookList = (props) =>{ 81 return ( 82 <div> 83 <table className="book"> 84 <thead data-type="ok"> 85 <tr> 86 <th>日付</th> 87 <th>買ったもの</th> 88 <th>入金</th> 89 <th>出金</th> 90 </tr> 91 </thead> 92 <tbody> 93 {props.books.map((book) => 94 <MoneyBookItem book={book} key={book.date + book.item}/>)} 95 </tbody> 96 </table> 97 </div> 98 99 ); 100} 101 102MoneyBookList.propTypes = { 103 books: PropTypes.array.isRequired 104} 105 106const MoneyBookItem = (props) =>{ 107 const {date,item,amount} = props.book 108 return ( 109 <tr> 110 <td>{date}</td> 111 <td>{item}</td> 112 <td>{amount > 0 ? amount : null}</td> 113 <td>{amount < 0 ? -amount : null}</td> 114 </tr> 115 ) 116} 117 118MoneyBookItem.propTypes = { 119 book: PropTypes.object.isRequired 120} 121ReactDOM.render( 122 <MoneyBook />, 123 document.getElementById('root') 124) 125

試したこと

調べた見たところbindをすればいいとあり、書いてみましたが動きませんでした。
this.addBook = this.addBook.bind(this);

https://www.amelt.net/imc/programming/javascript-programming/4959/

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

karamarimo

2019/04/13 10:45

componentDidMount で this.setState = ... とありますがtypoではないですか?
kita_morio

2019/04/14 11:52

ありがとうございます!!1
guest

回答1

0

Reactはあまり触ったことがないので、間違っていたらすいません
以下の部分でthis.setStateに関数ではないオブジェクトを代入してしまっているような気がします。

componentDidMount (){ this.setState = ({books:[ {date:"12/1",item:"うどん", amount:"10000" }, {date:"12/1",item:"うどん", amount:"-30000" }, {date:"12/1",item:"うどん", amount:"-5000" }, {date:"12/1",item:"うどん", amount:"33000" }, ]}) }
({books:[ {date:"12/1",item:"うどん", amount:"10000" }, {date:"12/1",item:"うどん", amount:"-30000" }, {date:"12/1",item:"うどん", amount:"-5000" }, {date:"12/1",item:"うどん", amount:"33000" }, ]})

は関数ではないのでthis.setState is not a functionと怒られているのではないかと思うのですがどうでしょうか

投稿2019/04/15 13:51

KuwabataK

総合スコア306

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問