Блог

Я не смог найти связанную ситуацию с mines, однако моя проблема в том, что у меня обычная ошибка TypeError: Cannot read property 'props' of undefined .

Странно то, что эта ошибка возникает только для метода, который я определил выше render() .

Хотя внутри render() я могу получить доступ без ошибок. Инструменты React dev показывают, что у меня даже есть доступ к props.

Код ниже:

 import { Route } from 'react-router-dom'
import AuthService from '../../utils/authentication/AuthService'
import withAuth from '../../utils/authentication/withAuth'

const Auth = new AuthService()

class HomePage extends Component {

    handleLogout() {
        Auth.logout()
        this.props.history.replace('/login')
    }

    render() {
        console.log(this.props.history)
        return (
            <div>
                <div className="App-header">
                    <h2>Welcome {this.props.user.userId}</h2>
                </div>
                <p className="App-intro">
                    <button type="button" className="form-submit" onClick={this.handleLogout}>Logout</button>
                </p>
            </div>
        )
    }
}

export default withAuth(HomePage)
  

Редактировать: извинения. Я также не хочу вносить путаницу, поэтому добавлю, что я также использую, @babel/plugin-proposal-class-properties чтобы избежать this привязки.

Это потому, что ваш метод handleLogout имеет свой собственный контекст. Для того, чтобы передать this значение класса вашему методу, необходимо выполнить одно из двух действий:

1) Свяжите его внутри конструктора класса:

 constructor(props) {
  super(props)
  this.handleLogout = this.handleLogout.bind(this)
}
  

2) Вы объявляете свой handleLogout метод как функцию со стрелкой

 handleLogout = () => {
  console.log(this.props)
}
  

я полагаю, что это не привязано к не es6. Таким образом, вы могли бы либо связать его с конструктором, либо вам может сойти с рук функция типа es6

 handleLogout = () => {
    Auth.logout()
    this.props.history.replace('/login')
}
  

Я не могу попробовать это, но вы также могли бы сделать

 constructor(props) {
  super(props);
  // Don't call this.setState() here!

  this.handleLogOut= this.handleLogOut.bind(this);
}
  

Вам нужно использовать .bind в вашем обработчике кликов.

 <button type="button" className="form-submit" onClick={this.handleLogout.bind(this)}>Logout</button>