Блог

Почему мои значения в this.props и this.state не определены в моем componentDidMount методе? В других частях моего компонента класса я могу правильно обращаться к своим реквизитам и значениям состояния. Нужно ли мне передавать их куда-то отдельно или где я допустил какие-либо ошибки?

Там я не получаю значений:

 componentDidMount() {
    console.log(this.props.token)
    console.log(this.state.training.coach)
    // values are null and undefined.
    if (this.props.token == this.state.training.coach) {
        this.setState({
            iscreator: true
        });
        console.log(this.state.iscreator)
    } else {
        this.setState({
            iscreator: false
        });
    }
}
  

Там я получаю правильные значения при доступе this.props.token :

 handleDelete = (event) => {
    if (this.props.token !== null) {
        const trainingID = this.props.match.params.trainingID;
        axios.defaults.headers = {
                "Content-Type": "application/json",
                Authorization: this.props.token
            }
        axios.delete(`http://127.0.0.1:8000/api/${trainingID}/`)
        this.props.history.push('/');
        this.forceUpdate();
    } else {
    
    }
}
  

this.setState является асинхронным, что означает, что функция after не ожидает ее завершения, поэтому, если вы console.log свое состояние сразу после обновления, оно все еще может иметь старое значение.

Чтобы исправить это, вы можете проверить значение своего состояния в своем, render где оно в конечном итоге обновится, или вы можете запустить setState с обратным вызовом, подобным этому

 this.setState({iscreator: true}, () => console.log(this.state.iscreator) )
  

Это гарантирует запуск console.log только после setState завершения.