Question

我知道此类问题已经在StackOverFlow上发布了很多，但是在我的代码中，我找不到我的代码不起作用的错误。

我尝试在我的AddHero.js组件（这是一个子组件）中创建一个新Hero，并将该新Hero更新为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} />}

TypeError：this.props.AddNewHero不是函数

2 个答案: