Блог

Главная - Вопросы по программированию - Ошибка типа: не удается прочитать свойство ‘push’ неопределенного ReactJS

Ошибка типа: не удается прочитать свойство ‘push’ неопределенного ReactJS

#reactjs #react-router #typeerror

#reactjs #реагирующий маршрутизатор #ошибка типа

Вопрос:

При использовании маршрутизации я получаю ошибку ниже

          <Button
            variant="outlined"
            color="primary"
            //disabled={isDisabledSpec}
            onClick={this.handleSubmit}
            //onClick={this.handleSubmit.bind(this)}
          >

Это тег кнопки, где вызывается handleSubmit .

 handleSubmit(e) {
    e.preventDefault();
    //const history = useHistory();
    this.props.history.push("/slider");
....}

Это функция handleSubmit

Комментарии:

1. useHistory() является перехватом и может использоваться только внутри функциональных компонентов. Если ваш компонент не отображается с помощью Route . Оберните его с withRouter помощью, иначе преобразуйте его в функциональный компонент.

2. вы связали свою handleSubmit функцию?

Ответ №1:

Вы так обернули свой компонент? если не обернуть так

 import { withRouter } from 'react-router';

 class Specification extends Component {(...)}
 export default withRouter(Specification);

и если вы не привязываете свою функцию, используйте функцию со стрелкой

 handleSubmit = (e) => {
    e.preventDefault();
    this.props.history.push("/slider");
}

Комментарии:

1. Да, я это сделал, если я использую handleSubmit = (e) => { e.preventDefault(); const history = useHistory(); this.props.history.push("/slider"); } его, это выдает ошибку: недопустимый вызов перехвата. Перехваты могут вызываться только внутри тела функционального компонента. Это может произойти по одной из следующих причин:

2. @tejesh как я вижу, вы используете компонент класса, не используйте здесь хуки …this.props.history.push() будет работать.

3. Да, но при этом я получаю ошибку типа: не удается прочитать свойство ‘push’ неопределенного

4. Теперь он работает, я внес некоторые изменения, как вы описали import { withRouter } from 'react-router'; and withRouter(Specification); , спасибо, чувак!

Ответ №2:

Вы можете выполнить следующие шаги для решения проблемы

  1. import { withRouter } from 'react-router-dom';
  2. onClick={this.handleSubmit.bind(this)} 
  3.  handleSubmit = (e) => {
e.preventDefault();
this.props.history.push("/slider");}
  4. export default withRouter(component_name);
Метки: