为什么我得到`this.props.onAdd is not a function`？

Question

我正在创建一个简单的 CRUD React 应用程序，让您可以管理产品。产品只有一个name和一个price。

在我addProduct命令成分，我的onSubmit方法可以成功登录this.nameInput.value, this.priceInput.value，但是当我改变日志this.props.onAdd我得到this.props.onAdd is not a function。

我正在学习教程，所以我确定我遗漏了一件小事，但可以在我的代码上使用另一组眼睛。

这是我的addProduct组件 - 该onSubmit方法具有this.props.onadd(...)：

import React, { Component } from 'react';

class AddProduct extends Component {
  constructor(props) {
    super(props);

    this.onSubmit = this.onSubmit.bind(this);
  }

  onSubmit(event) {
    event.preventDefault();

    this.props.onAdd(this.nameInput.value, this.priceInput.value);
  }
  render() {
    return (
        <form onSubmit={this.onSubmit}>
            <h3>Add Product</h3>
            <input placeholder="Name" ref={nameInput => this.nameInput = nameInput}/>
            <input placeholder="Price" ref={priceInput => this.priceInput = priceInput}/>
            <button>Add</button>
            <hr />
        </form>
    );
  }
}

这是我的 App.js：

import React, { Component } from 'react';
import './App.css';
import ProductItem from './ProductItem';
import AddProduct from './AddProduct';


const products = [
  {
    name: 'iPad',
    price: 200
  },
  {
    name: 'iPhone',
    price: 500
  }
];

localStorage.setItem('products', JSON.stringify(products));


class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      products: JSON.parse(localStorage.getItem('products'))
    };

    this.onAdd = this.onAdd.bind(this);
    this.onDelete = this.onDelete.bind(this);
  }
  componentWillMount() {
    const products = this.getProducts();
    this.setState({ products });
  }

  getProducts() {
    return this.state.products;
  }

  onAdd(name, price) {
    const products = this.getProducts();

    products.push({
      name,
      price
    });

    this.setState({ products })
  }

  onDelete(name) {
    const products = this.getProducts();

    const filteredProducts = products.filter(product => {
      return product.name !== name;
    });

    this.setState({ products: filteredProducts });
  }

  render() {
    return (
      <div className="App">
        <h1>Products Manager</h1>

        <AddProduct

        />

        {
          this.state.products.map(product => {
            return (
             <ProductItem
                key={product.name}
                {...product}
                onDelete={this.onDelete}
              />
            );
          })
        }
      </div>
    );
  }
}

export default App;

我的代码怎么了？当我单击“添加”按钮时，出现错误。

Answer 1

这是因为你没有传递任何道具给<AddProduct />你渲染。

你应该像这样添加它：

<AddProduct onAdd={this.onAdd}/>