ReactでsetStateがうまくいかない

Question

前提・実現したいこと

旧版Reactチュートリアルのコメントボックスを参考に、
新版Reactチュートリアルの形式で自力で考えて作っているのですが、
setStateがなぜか反映されなくて困っています。

該当のソースコード

実際の動きとコード全体はこちらにあります。
粗雑で申し訳ないです。
下記はその中からCommentFormコンポーネントのみ抽出しました。

  class CommentForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      author: "",
      comment: "",
      commentList: []
    };
  }
  
  handleChange(event) {
    switch (event.target.name) {
      case 'name':
        let author=this.state.author;
        author = event.target.value;
                
        this.setState({
          author: author,
          comment: this.state.comment
        });
        break;
            
            
      case 'comment':
        let comment=this.state.comment;

        comment = event.target.value;
          this.setState({
            author: this.state.author,
            comment: comment
          });            
        break;
    }      
  }
  
  submit(){
    let commentList = this.state.commentList;
    let newComments = commentList.concat([{author:this.state.author,comment:this.state.comment}]);
       console.log(JSON.stringify(newComments)+"a: "+this.state.author+",c: "+this.state.comment);
    this.setState({
      author: "",
      comment: "",
      commentList: newComments
    });
    console.log(this.state.commentList+"a: "+this.state.author+",c: "+this.state.comment);
    return true;
  } 
  
   render(){
      return (
     <div>
    <h1>頂いた一言</h1>
    <CommentList commentList={this.state.commentList}/>
    <form onSubmit={()=>this.submit()} onChange={(e)=>this.handleChange(e)}>
  
      <input type="text" value={this.state.author} placeholder="お名前を！" onChange={(e)=>this.handleChange(e)} name="name" />
    
      <input type="text" value={this.state.comment} placeholder="何か一言！" onChange={(e)=>this.handleChange(e)} name="comment"/>
      <input type="submit" value="送信"/>
        </form></div>
  );
   }
}

試したこと

上記コードに書いている通り、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の中身が空のままです。

どうぞよろしくお願いします。

Answer 1

renderの中で
console.log(this.state.commentList);と記述して操作してみてください。
submit押すと、出力されるはずです。

setStateのあとにすぐにstateオブジェクトへ反映されるわけではないです。
どこか公式ドキュメントにあったと思いますが。

https://reactjs.org/docs/react-component.html#setstate

もしすぐにsetした値を使いたいのであれば

handleSubmit = () => {
  this.setState({ hoge: 'bar' }, this.watch)
}

watch = () => {
  console.log(this.state.hoge);
}

こんな感じでできたはずです。

Comments

[simaenaga_mk2]

返信遅れてしまいました。しっかりドキュメントを読むようにします。ありがとうございます！