Reactjs:React router dom无法读取Undefined的属性推送

Question

在您得出我没有很好地梳理stackoverflow的结论之前，我想声明我已经做到了，但我还没有得到解决方案。

大家好，我已经有这个问题好几天了，我试图在点击按钮后按下，但我做不到。然后我尝试在组件DidMount中console.log this.ops，结果它显示了一个空对象。

这是App.js文件

import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';
import Layout from './hoc/Layout/Layout';
import BurgerBuilder from './containers/BurgerBuilder/BurgerBuilder';
import Checkout from './containers/Checkout/Checkout';
class App extends Component {
render () {
return (
<div>
<Layout>
<Switch>
<Route path="/" exact render = {routeProps => (
<BurgerBuilder {...routeProps} />
)}
/>          
<Route path="/checkout" exact component={Checkout} />
</Switch>
</Layout>
</div>
);
}
}
export default App;

这是汉堡制造商组件

import React, { Component } from 'react'
import Aux from '../../hoc/Aux_/Aux_'
import Burger from '../../components/Burger/Burger'
import BuildControls from '../../components/Burger/BuildControls/BuildControls'
import Modal from '../../components/UI/Modal/Modal'
import OrderSummary from '../../components/Burger/OrderSummary/OrderSummary'
import Spinner from '../../components/UI/Spinner/Spinner'
import withErrorHandler from '../../hoc/withErrorHandler/withErrorHandler'
import axios from '../../axios-orders'
const INGREDIENT_PRICES = {
salad: 0.5,
cheese: 0.4,
meat: 1.3,
bacon: 0.7
}
class BurgerBuilder extends Component{
constructor(props){
super(props);
this.state = {
ingredients:null,
totalPrice:4,
purchaseable:false,
purchasing:false,
loading:false,
error: false
}
}   
componentDidMount(){
console.log(this.props) 
axios.get('/ingredients')
.then(response => {
this.setState({ingredients : response.data});
})
.catch((error) => {
this.setState({error: true})
})
}
updatePurchaseState = (ingredients) => {
const sum = Object.keys(ingredients)
.map((igKey) => (
ingredients[igKey]
))
.reduce((sum, el) =>{
return sum + el
} ,0)
this.setState({purchaseable: sum > 0})
}
addIngredientHandler = (type) => {
const oldCount = this.state.ingredients[type];
const updatedCount = oldCount + 1;
const updateIngredients = {
...this.state.ingredients
};
updateIngredients[type] = updatedCount;
const priceAddition = INGREDIENT_PRICES[type];
const oldPrice = this.state.totalPrice
const newPrice = oldPrice + priceAddition;
this.setState({totalPrice: newPrice, ingredients: updateIngredients},
this.updatePurchaseState(updateIngredients)
)
}
removeIngredientHandler = (type) => {
const oldCount = this.state.ingredients[type];
if(oldCount <= 0){
return ;
}
const updatedCount = oldCount - 1;
const updateIngredients = {
...this.state.ingredients
};
updateIngredients[type] = updatedCount;
const priceDeduction = INGREDIENT_PRICES[type];
const oldPrice = this.state.totalPrice
const newPrice = oldPrice - priceDeduction;
this.setState({totalPrice: newPrice, ingredients: updateIngredients},
this.updatePurchaseState(updateIngredients)
)
}
purchaseHandler = () => {
this.setState({purchasing:true})
}
purchaseCancelHandler = () => {
this.setState({purchasing:false})
}
purchaseContinueHandler = () => {
// this.setState({loading:true})
// alert('You Continued')
// const order = {
//  ingredients: this.state.ingredients,
//  price: this.state.totalPrice,
//  customer:{
//      name:'Durojaye Peter',
//      address:{
//          street:'Ire-Akari Estate 2',
//          zipCode: '41351',
//          country: 'Nigeria'
//      },
//      email:'[e-mail]',
//  },
//  deliveryMethod:'fastest'
// }
// axios.post('/orders',order)
//  .then(response => {
//      this.setState({loading:false, purchasing:false})
//  })
//  .catch(error => {
//      this.setState({loading:false, purchasing:false})
//  })
this.props.history.push('/')
}
render(){
const disabledInfo = {
...this.state.ingredients
};
for(let key in disabledInfo){
disabledInfo[key] = disabledInfo[key] <= 0
}
let orderSummary = null 
let burger = this.state.error ? <p>Ingredients cannot be loaded</p> : <Spinner />
if(this.state.ingredients !== null){
burger = (
<Aux>   
<Burger ingredients={this.state.ingredients}/>
<BuildControls
ingredientAdded={this.addIngredientHandler}
ingredientRemoved={this.removeIngredientHandler}                    
disabled={disabledInfo}
purchaseable={this.state.purchaseable}
price= {this.state.totalPrice}
ordered={this.purchaseHandler}
/>
</Aux>
);
orderSummary = <OrderSummary 
ingredients={this.state.ingredients}
purchaseCanceled = {this.purchaseCancelHandler}
purchaseContinued = {this.purchaseContinueHandler}
price={this.state.totalPrice}
/>          
}
if(this.state.loading){
orderSummary = <Spinner />
}               
return(
<Aux>
<Modal show={this.state.purchasing} modalClosed={this.purchaseCancelHandler}>
{orderSummary}
</Modal>
{burger}
</Aux>
)
}
}
export default withErrorHandler(BurgerBuilder, axios)

正如代码中所示，我试图在purchaseContinueHandler中console.log this.ops，但它一直显示一个空对象。

非常感谢，伙计们，任何帮助都将不胜感激。

Answer 1

是否尝试将basename赋予Layout组件。同时尝试删除Exact。

<Layout basename={process.env.REACT_APP_BASE_PATH}>
<Switch>
<Route path="/" render = {routeProps => (
<BurgerBuilder {...routeProps} />
)}
/>     
</Layout