Ошибка типа: this.props.sendKitchen - это не функция ... почему?

Question

Я знаю, что этот вопрос часто задают, но я не нашел решения для меня, и я понятия не имею, почему я получил эту ошибку.Ошибка typeError находится в моем компоненте Order (child).И я использую реагировать и реагировать на маршрутизатор.

Это мой дочерний компонент:

class Order extends Component{
    constructor(props){
        super(props);
        this.sendKitchen=this.sendKitchen.bind(this);
        this.state={
            name:'',
            choiceMenu:[],
            order:[],
            total:0,
            timeS:'',
            timeN:0
        }
    }
    sendKitchen(){

        let orderString=[];
        (this.state.order).forEach(food=>{orderString.push(food.name)});

        let date=new Date();
        let dateString=date.getHours()+':'+date.getMinutes();
        let dateNumber=date.getTime();

        let client={
            name:this.state.name,
            delivery: false,
            total: parseInt(this.state.total),
            timeS:dateString,
            timestamp:dateNumber,
            order: orderString
        };  
        this.props.toKitchen(client);
    }
    render(){
        return(

              <Button variant="success" onClick={this.sendKitchen}>ENVIAR A COCINA</Button>
        )}

А это мой родительский компонент

class App extends Component{
  constructor(props){
    super(props);
    this.toKitchen=this.toKitchen.bind(this);
    this.state={
      clients:[]
    }
  }
  toKitchen(client){
    console.log(client);
  }

  render(){
    return (
      <div >

        <Order
          sendKitchen={this.toKitchen}/>

      </div>
    );
  }
}

Я много пробовалРешение, но все еще с той же ошибкой

РЕДАКТИРОВАТЬ: Я удаляю часть реакции-маршрутизатора, я изменяю имена функций, которые проходят через реквизиты и все еще не работают.Также я изменяю эти функции на функции стрелок, но появляется та же ошибка, поэтому я удаляю это изменение.

Answer 1

Какой беспорядок - это не имеет никакого смысла - слишком много опробованных опций;)

<App/> обычно отображается в html, а не <Router/>

<Router/>быть внутри <App/>

Единственный случай маршрутизатора, в котором this.props.sendKitchen имеет смысл path='/' component={App} - <App/> renderswith sendKitchen` prop.Для '/ order' этот реквизит не определен.

Здесь нет лишних слов, удалите тег.