React开发报错：TypeError: Cannot read properties of undefined (reading 'push')

我在开发React应用时遇到报错：TypeError: Cannot read properties of undefined (reading 'push')，这个错误出现在尝试对undefined对象执行push操作时。我检查过代码，觉得要执行push的变量已经正确初始化了，搞不懂问题出在哪。

React代码：

import React from 'react';
import {
  Badge,
  Button,
  Col,
  DropdownItem,
  DropdownMenu,
  DropdownToggle,
  FormGroup,
  Input,
  InputGroup,
  InputGroupAddon,
  InputGroupText,
  Row,
  Table,
  UncontrolledButtonDropdown,
} from 'reactstrap';
import Widget from '../../../components/Widget';
import s from './Static.module.scss';
import { newUser, ricercaclienti } from '../../../services/cliente';

class Static extends React.Component {
  constructor(props) {
    super(props);

    this.textInput = React.createRef();

    this.state = {
      tableStyles: [],
      input: '',
    };

    this.handleChangetext = this.handleChangetext.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.confirm = this.confirm.bind(this);
  }

  getEventEditUser(
    id,
    ragioneSociale,
    indirizzo,
    provincia,
    partitaiva,
    CodiceFiscale,
    titolo,
    fax,
    pec,
    Dirittochiamata,
    sdi,
    RimborsoKM,
    citta,
    cap,
    Telefono,
    Email,
    Nome1,
    Nome2,
    Cellulare1,
    Cellulare2,
    Sconto1,
    Sconto2,
    Sconto3,
    IBAN,
    Applicaprezzorisorsegiornaliero
  ) {
    localStorage.setItem('IdClienteSelect', id);
    localStorage.setItem('RagioneSocialeSelect', ragioneSociale);
    this.props.history.push({
      pathname: '/app/editclient',
      state: {
        idCliente: id,
        ragioneSociale: ragioneSociale,
        indirizzo: indirizzo,
        Provincia: provincia,
        PartitaIVA: partitaiva,
        CodiceFiscale: CodiceFiscale,
        Titolo: titolo,
        FAX: fax,
        PEC: pec,
        Dirittochiamata: Dirittochiamata,
        SDI: sdi,
        RimborsoKM: RimborsoKM,
        Citta: citta,
        Cap: cap,
        Telefono: Telefono,
        Email: Email,
        Nome1: Nome1,
        Cellulare1: Cellulare1,
        Nome2: Nome2,
        Cellulare2: Cellulare2,
        Sconto1: Sconto1,
        Sconto2: Sconto2,
        Sconto3: Sconto3,
        IBAN: IBAN,
        Applicaprezzorisorsegiornaliero: Applicaprezzorisorsegiornaliero,
      },
    });
  }
}

问题原因 #

报错的根本原因是this.props.history是undefined，并不是你初始化的变量有问题，而是你的Static组件没有从React Router接收到history对象。

解决方法 #

1. 确认组件的渲染方式 #

只有被React Router的<Route>组件直接渲染的组件，才会自动获得history、location、match这些路由相关的props。如果你的Static组件是作为普通子组件嵌套在其他组件里，不是通过路由直接渲染的，就拿不到history。

2. 用withRouter高阶组件包裹组件（类组件适用） #

如果组件不是路由直接渲染的，导入withRouter并包裹你的组件，就能让组件拿到路由props：

// 先导入withRouter
import { withRouter } from 'react-router-dom';

// 导出组件时用withRouter包裹
export default withRouter(Static);

3. React Router v6的适配方案 #

如果用的是React Router v6，withRouter已经被移除了，有两种处理方式：

• 把类组件重构为函数组件，使用useNavigate钩子：

  import { useNavigate } from 'react-router-dom';
  
  function Static() {
    const navigate = useNavigate();
  
    const getEventEditUser = () => {
      // ...其他逻辑
      navigate('/app/editclient', { state: {...} });
    }
  
    // ...组件其他内容
  }
  

• 自定义一个类似withRouter的高阶组件，把useNavigate等钩子的结果作为props传给类组件。

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