Ошибка типа: this.props.AddNewHero не является функцией

Question

Я знаю, что такого рода вопросы часто публиковались на StackOverFlow, но в моем коде я не смог найти ошибку, почему мой код не работает.

Я пытаюсь создать нового Героя вмой компонент AddHero.js (это дочерний компонент) и обновите этого нового героя до состояния в App.js (родительский компонент).Однако я получаю сообщение об ошибке, показывающее, что TypeError: this.props.AddNewHero не является функцией

Вот мой код:

AddHero.js

import React, { Component } from 'react';

class AddHero extends Component {

    constructor(props) {
        super(props);

        this.onSave = this.onSave.bind(this);

        this.state = {
            Id: 0, Name: "", Dob: new Date(), Stocked: true, Price: 0
        };  
    }

    onNameChange(e) {
        this.setState({
            Name: e.target.value
        });
    }

    onDobChange(e) {
        this.setState({
            Dob: e.target.value
        });
    }

    onStockedChange(e) {
        this.setState({
            Stocked : e.target.value
        });
    }

    onPriceChange(e) {
        this.setState({
            Price : e.target.value
        });
    }

    onSave(e){
        e.preventDefault();

        const newHero = {           
            Name: this.state.Name,
            Dob: this.state.Dob,
            Stocked: this.state.Stocked,
            Price: this.state.Price
          };

        this.props.AddNewHero(newHero); //The error is here
    }

    render() {
        return (
            <div>
                <h1>Add hero</h1>
                <form>
                    <div className="form-group">
                        <label>Name </label>
                        <input type="text" onChange={this.onNameChange.bind(this)}></input>
                    </div>
                    <div className="form-group">
                        <label>Dob </label>
                        <input type="date" onChange={this.onDobChange.bind(this)} defaultValue={new Date().toISOString().substr(0, 10)}></input>
                    </div>
                    <div className="form-group">
                        <label>Stocked </label>
                        <input type="checkbox" onChange={this.onStockedChange.bind(this)} ></input>
                    </div>
                    <div className="form-group">
                        <label>Price </label>
                        <input type="text" onChange={this.onPriceChange.bind(this)}></input>
                    </div>
                    <button onClick={this.onSave}>Save</button>
                </form>
            </div>
        );
    }
}

export default AddHero;

App.js

import React, { Component } from 'react';
import { Link, BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import AllHeroes from './components/Hero/AllHeroes';
import AddHero from './components/Hero/AddHero';
import EditHero from './components/Hero/EditHero';


class App extends Component {

  constructor(props) {
    super(props);
  }

  state = {
    Heroes: [
      { Id: 1, Name: "hero1", Dob: new Date("1-1-2017"), Stocked: true, Price: 1.50 },
      { Id: 2, Name: "hero2", Dob: new Date("5-31-2018"), Stocked: false, Price: 2.50 },
      { Id: 3, Name: "hero3", Dob: new Date("2019"), Stocked: true, Price: 3.50 },
      { Id: 4, Name: "hero4", Dob: new Date("4-20-2010"), Stocked: false, Price: 4.50 },
      { Id: 5, Name: "hero5", Dob: new Date("12-31-2018"), Stocked: true, Price: 5.50 },
    ]
  }

  GetAllHeroes() {
    return this.state.Heroes;
  }

  AddNewHero(newHero) {
    const id = this.state.Heroes.length + 1;
    newHero.Id = id;

    this.setState({
      Heroes: [...this.state.Heroes, newHero]
    });
  }

  render() {
    return (
      <Router>
        <div className="container">

          <Link to={'/'}>Home </Link><br />
          <Link to={'/AllHeroes'}>All Heroes </Link><br />
          <Link to={'/Add'}>Add </Link><br />

          <Switch>
            <Route path='/AllHeroes' component={AllHeroes} />
            <Route path='/Add' component={AddHero} AddNewHero={this.AddNewHero} />
            <Route path='/Edit/:id' component={EditHero} />
          </Switch>
        </div>
      </Router >
    );
  }
}

export default App;

Спасибо заранее.

Answer 1

Вы не можете передавать реквизиты с Route подобным образом, вы должны использовать render опору для этой цели.

<Route
  path="/Add"
  render={(props) => <AddHero {...props} AddNewHero={this.AddNewHero} />}
/>

Answer 2

Проблема в том, что вы используете react-router и рассчитываете на это, чтобы развернуть реквизит, а этого не происходит. Вы должны попытаться передать упакованный компонент вместо исходного в App.js. Должно работать следующее:

<Route path='/Add' component={() => <AddHero AddNewHero={this.AddNewHero} />}