reactjs - 设置状态没有在 Reactjs 中立即更新？

Question

我创建了这段代码，点击一个按钮，它的 id 在数组“allInterest”中连接。

但是在这里我注意到，它的设置状态落后于一个状态。就像如果我第一次单击按钮然后在控制台中，它的数组是空白的，但是当我单击另一个按钮时，它会采用第一次单击的按钮 ID，同样如此进一步。

请指导我为什么会发生这种情况。谢谢期待

 export default class Test extends Component {
  constructor(props, context) {
    super(props, context);

    this.handleChange = this.handleChange.bind(this);
    this.state = {
      value:'',
      numbers:[1, 2, 3, 4, 5],
      posts : [
        {id: 1, topic:"Animal"},
        {id: 2, topic:"Food"},
        {id: 3, topic:"Planet"},
        {id: 4, topic:"Nature"},
      ],
      btnSelected:false,
      allInterest:[],
    };
    console.log(this.state);
  }

  handleChange(e) {
    //console.log(e.target.value);
    const name = e.target.name;
    const value = e.target.value;
    this.setState({[name]: value});
    console.log(this.state)
   }

   getInterest(id){
     console.log(id);
     console.log(this.state.allInterest)
    // if(this.state.allInterest.length>0 )
    // {
    //   console.log("Yes we exits");
    // }
    // else
    // {
      console.log(id)
      // this.setState({
      //   allInterest:this.state.allInterest.concat(id)
      // })
      this.setState((prevState) => ({
        allInterest: prevState.allInterest.concat([id])
      }));  
    // }
    console.log(this.state)

   }



  render() {
    // numbers = [1, 2, 3, 4, 5];
    return (
      <div>

      <div className="signupApp">
      Test
      {this.state.listobj}



      { this.state.posts.map((posts,index) => 
        <li key={'tab'+index} class="btn btn-default" onClick={()=>this.getInterest(posts.id)} onChange={() => this.handleChange(this.event)}>{posts.topic}</li>
        )}

      </div>
  </div>
    );
  }
}