TypeError：无法读取未定义的属性（读取“推送”）反应路由器 DOM

Question

我刚刚学会了反应，当按钮被点击时我想导航，但它没有，并且给出了一个错误，'push'是未定义的，如何解决它？

import { Route, useHistory as history } from 'react-router-dom'

export default class TotalPrice extends Component {
  checkout = (sum) => {
    const order = {
      total_bayar: sum,
      menus: this.props.carts
    }

    axios.post(API_URL + "orders", order).then((res) => {
      this.props.history.push('/order-success')
    })
  } 
  render() {
    const sum = this.props.carts.reduce(function (result, item) {
      return result + item.total_price;
    }, 0);

    return (
      <Row className='fixed-bottom'>
        <Col md={{span: 3, offset: 9}} className='py-4 px-4 total'>
          <h4>
            Total : <strong className='total-number'>Rp. {priceSplitter(sum)}</strong>
          </h4>
          <Button
            variant="primary"
            className="button-checkout"
            onClick={() => this.checkout(sum)}
          >
            <FontAwesomeIcon icon={faShoppingCart} />
            Checkout
          </Button>
        </Col>
      </Row>
    )
  }
}

Answer 1

错误是说this.props.history是未定义的。 由于您似乎正在使用react-router-dom@5 ，因此您可以导入并使用withRouter高阶组件并装饰此TotalPrice组件以注入路由 props 。

import { Route, withRouter } from 'react-router-dom'

class TotalPrice extends Component {
  checkout = (sum) => {
    const order = {
      total_bayar: sum,
      menus: this.props.carts
    };

    axios.post(API_URL + "orders", order)
      .then((res) => {
        this.props.history.push('/order-success');
      });
  }

  render() {
    const sum = this.props.carts.reduce(function (result, item) {
      return result + item.total_price;
    }, 0);

    return (
      <Row className='fixed-bottom'>
        <Col md={{span: 3, offset: 9}} className='py-4 px-4 total'>
          <h4>
            Total : <strong className='total-number'>Rp. {priceSplitter(sum)}</strong>
          </h4>
          <Button
            variant="primary"
            className="button-checkout"
            onClick={() => this.checkout(sum)}
          >
            <FontAwesomeIcon icon={faShoppingCart} />
            Checkout
          </Button>
        </Col>
      </Row>
    );
  }
}

export default withRouter(TotalPrice);