前提・実現したいこと
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/ツールのバージョンなど)
ここにより詳細な情報を記載してください。