Блог

Я пытаюсь обновить состояние после успешной попытки входа в систему, и состояние не обновляется, а остальная часть кода после setstate также не вызывается?

 console.log(`test`) // THIS GETS CALLED
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
})
console.log(`test22`)  // THIS DOESNT GETS CALLED
console.log(this.state)  // THIS DOESNT GETS CALLED
 

ИЗМЕНИТЬ: Показано больше кода для ссылки

Пример кода находится в функции «userInfo» ниже

 class App extends Component {
  constructor() {
    super()
    this.state = {
      show: false,
      modalId: '',
      modaldata: undefined,
      serverstatus: socket.connected,
      signedin: false,
      userinfo: {}
    }

    console.log(`Socket connected: ${socket.connected}`)

    this.showModal = this.showModal.bind(this)
    this.hideModal = this.hideModal.bind(this)
  }

  componentDidMount() {
    this.UserInfo()
  }

  async UserInfo() {
    console.log('im here')

    const id = localStorage.getItem(`id`)

    await axios.get(`/Auth/${id}`, {
      headers: { 'auth-token': localStorage.getItem(`auth-token`) }
    })
    .then(async res => {
      console.log(res)
    
      if(res.data.errorcode == 400) {
        let err = res.data.error
        if(err.name === `TokenExpiredError`) {
          console.warn(`Error: JWT Expired, Please log in again.`)

          toast.error('Login session expired: Please log in again.', {
            position: "top-center",
            autoClose: 5000,
            hideProgressBar: false,
            closeOnClick: true,
            pauseOnHover: true,
            draggable: true,
            progress: undefined,
          })
        }
      } else {
        console.log(`hellogoodnight`)
        console.log(typeof res)
        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
        })
        console.log(`test22`)
        console.log(this.state)
      }
    })
    .catch(err => {
      if(err.data === `jwt expired`) {
      }
    })
  }

  showModal = async (modalId, modaldata) => {
    console.log(modalId, modaldata)
    console.log(this.state)
    this.setState({
      show: true,
      modalId: modalId,
      modaldata: modaldata
    })
    console.log(this.state)
  }

  hideModal = async () => {
    this.setState({
      show: false,
    })
    setTimeout(() => {
      this.setState({
        show: false,
        modalId: '',
        modaldata: null
      })
    }, 450)
  }



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

    console.log(this.state.serverstatus)
    return (
      <BrowserRouter>
        <Header signedin={this.state.signedin} userinfo={this.state.userinfo} showModal={this.showModal} serverstat={this.state.serverstatus} />
        <Switch>
          <Route path="/" render={() => (
            <Lobbies />
          )} exact />
        </Switch>
        <ToastContainer />
        <Modal UserInfo={this.UserInfo} modaldata={this.state.modaldata} modalId={this.state.modalId} showModal={this.showModal} hideModal={this.hideModal} show={this.state.show} />
      </BrowserRouter>
    )
  }
}
 

я вызываю функцию из модального входа ниже
Используя это.реквизит.Информация о пользователе

 SISubmit (e) {
        e.preventDefault()
        window.grecaptcha.ready(() => {
            window.grecaptcha.execute(`MY CAPTCHA KEY`,
            {
                    action: 'login'
            })
            .then(token => {
                axios.post(`Auth/Login`, {
                    'g-recaptcha-response': token,
                    emailuser: this.SignInInputs.emailuser.current.value,
                    pass: this.SignInInputs.pass.current.value
                })
                .then(res => {
                    localStorage.setItem("auth-token", res.data.token)
                    localStorage.setItem("expiry", Math.floor(Date.now() / 1000)   60 * 60)
                    localStorage.setItem("id", res.data.id)
                    this.props.UserInfo()
                })
                .catch(err => {
                    console.log(err)
                })
            })
        })
    }