前提・実現したいこと
旧版Reactチュートリアルのコメントボックスを参考に、
新版Reactチュートリアルの形式で自力で考えて作っているのですが、
setStateがなぜか反映されなくて困っています。
該当のソースコード
実際の動きとコード全体はこちらにあります。
粗雑で申し訳ないです。
下記はその中からCommentFormコンポーネントのみ抽出しました。
React
1 class CommentForm extends React.Component { 2 constructor(props) { 3 super(props); 4 this.state = { 5 author: "", 6 comment: "", 7 commentList: [] 8 }; 9 } 10 11 handleChange(event) { 12 switch (event.target.name) { 13 case 'name': 14 let author=this.state.author; 15 author = event.target.value; 16 17 this.setState({ 18 author: author, 19 comment: this.state.comment 20 }); 21 break; 22 23 24 case 'comment': 25 let comment=this.state.comment; 26 27 comment = event.target.value; 28 this.setState({ 29 author: this.state.author, 30 comment: comment 31 }); 32 break; 33 } 34 } 35 36 submit(){ 37 let commentList = this.state.commentList; 38 let newComments = commentList.concat([{author:this.state.author,comment:this.state.comment}]); 39 console.log(JSON.stringify(newComments)+"a: "+this.state.author+",c: "+this.state.comment); 40 this.setState({ 41 author: "", 42 comment: "", 43 commentList: newComments 44 }); 45 console.log(this.state.commentList+"a: "+this.state.author+",c: "+this.state.comment); 46 return true; 47 } 48 49 render(){ 50 return ( 51 <div> 52 <h1>頂いた一言</h1> 53 <CommentList commentList={this.state.commentList}/> 54 <form onSubmit={()=>this.submit()} onChange={(e)=>this.handleChange(e)}> 55 56 <input type="text" value={this.state.author} placeholder="お名前を!" onChange={(e)=>this.handleChange(e)} name="name" /> 57 58 <input type="text" value={this.state.comment} placeholder="何か一言!" onChange={(e)=>this.handleChange(e)} name="comment"/> 59 <input type="submit" value="送信"/> 60 </form></div> 61 ); 62 } 63} 64
試したこと
上記コードに書いている通り、setStateの前で
console.log(JSON.stringify(newComments)+"a: "+this.state.author+",c: "+this.state.comment);
後で
console.log(this.state.commentList+"a: "+this.state.author+",c: "+this.state.comment);
を書きました。そこへ名前欄にあああ、コメント欄にあああと入力すると
[{"author":"あああ","comment":"あああ"}]a: あああ,c: あああ a: あああ,c: あああ
の二行が出力されました。
このようにsetStateで中身が変わらずに、commentListの中身が空のままです。
どうぞよろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/26 02:41