React登录成功后调用setState状态不更新且后续代码未执行

问题根因 #

1. this指向丢失导致执行报错被静默吞掉
   你在App组件中只给showModal、hideModal绑定了this指向，UserInfo方法没有绑定this，当它作为props传递给Modal组件后被调用时，内部的this不再指向App组件实例，执行this.setState时会抛出引用错误，直接中断后续代码执行，所以test22等打印语句不会运行。而且你的axios catch块几乎没有错误打印逻辑，错误被静默吞掉，你自然看不到报错提示。
2. setState异步特性导致你看不到即时更新
   就算setState正常执行，你直接在它后面打印this.state也拿不到最新值，React的setState是异步批量更新的，状态更新会被合并延后执行，同步代码执行时状态还没完成更新。
3. 额外问题：你把socket事件监听写在了render函数里，每次组件render都会重复注册监听，会导致内存泄漏和重复触发逻辑的问题。

修复方案 #

• 修复UserInfo的this指向，两种方案二选一：
  1. 在constructor中补充绑定：

  this.UserInfo = this.UserInfo.bind(this)
  

  2. 把UserInfo改成箭头函数写法，和showModal保持一致：

  async UserInfo = () => {
    // 原有逻辑不变
  }
  

• 补全catch块的错误打印，避免吞错：

  .catch(err => {
    console.error('用户信息请求出错：', err)
    if(err?.data === `jwt expired`) {
      // 原有逻辑
    }
  })
  

• 如果需要在状态更新完成后执行逻辑，放到setState的第二个回调参数里：

  this.setState({
    userinfo: {
      id: res.data._id,
      username: res.data.username,
      email: res.data.email,
      avatar: res.data.avatar,
      favpacks: res.data.favpacks,
    },
    signedin: true
  }, () => {
    // 这里才能拿到更新后的state
    console.log(`test22`)
    console.log(this.state)
  })
  

• 把socket监听逻辑移到componentDidMount生命周期中，同时在componentWillUnmount里销毁监听：

  componentDidMount() {
    this.UserInfo()
    socket.on(`/server/connected`, ((req, res) => {
      console.log(`Socket connected: ${socket.connected}`)
      this.setState({
        serverstatus: socket.connected
      })
    }))
  }
  
  componentWillUnmount() {
    socket.off(`/server/connected`)
  }
  

内容的提问来源于stack exchange，提问作者bee