Невозможно передать реквизит из родительского компонента в дочерний компонент

Question

Мне нужно передать props дочернему компоненту Product, но я не знаю, чего я здесь не вижу.

Родитель Компонент:

var Products = React.createClass({ 
    getInitialState: function(){..}, 
    deleteProduct: function(){..}, 
    updateProduct: function(){..}, 
    render: function(){ 
    var products = _.map(this.state.products, function(product){ 
     return(
     <Product key={product.id} product={product} handleDeleteProduct={this.deleteProduct} handleEditProduct={this.editProduct} formData={this.props.formData}/> 
    ) 
    }); 
    return (
    <table> 
     <thead> 
     <tr> 
      <th>Name</th> 
      <th>Quantity</th> 
      <th>Price</th> 
      <th colSpan="4">Actions</th> 
     </tr> 
     </thead> 
     <tbody> 
     {products} 
     </tbody> 
    </table> 
) 
} 
}); 

Детский компонент:

var Product = React.createClass({ 
console.log(this); //props: handleDeleteProduct: undefined, handleEditProduct: undefined 
handleEdit: function() { 
    e.preventDefault(); 
    data = {..}; 
    $.ajax({ 
    .., 
    success: (function(_this) { 
     console.log(_this); //props: handleDeleteProduct: undefined, handleEditProduct: undefined 
     return function(data) { 
     _this.setState({ 
      edit: false 
     }); 
     return _this.props.handleEditProduct(_this.props.product, data); 
     }; 
    })(this) 
    }); 
} 
}); 

Я могу использовать key и product в качестве реквизита внутри компонента, но не this.props.handleDeleteProduct и this.props.handleEditProduct. Я думаю, может быть, я использую props внутри обратного вызова success$.ajax, а затем может быть связано с асинхронным запросом. Не уверен.

Ошибка я получаю это

Uncaught TypeError: _this.props.handleEditProduct is not a function 

Я не уверен, что я делаю неправильно здесь. Я попытался зациклиться между <tbody>, но все равно не повезло. Также здесь я вызываю функции как this.deleteProduct в качестве ссылки, но не по вызову функции. И если я делаю вызовом по функции, то сообщается об ошибке execjs.

Я принял это в качестве эталона для зацикливания внутри JSX: loop inside React JSX

но не повезло. Пожалуйста помоги.

Answer 1

Вы передаете handleEditProduct={this.editProduct}, когда в вашем родительском компоненте функция называется updateProduct. Измените его на handleEditProduct={this.updateProduct} и я буду держать пари, он работает

EDIT:

Так как это не сработало, я был немного сложнее, и я думаю, что я вижу, в чем проблема. Я довольно уверен, что _ не autobind this как React.createClass. Так что, когда вы карта над вашей продукцией здесь:

var products = _.map(this.state.products, function(product){ 
     return(
     <Product key={product.id} product={product} handleDeleteProduct={this.deleteProduct} handleEditProduct={this.editProduct} formData={this.props.formData}/> 
    ) 
    }); 

this не установлен в ваш среагировать элемент. Попробуйте сохранить ссылку на this перед тем, как вы map, прямо привяжите this к вашей функции карты или используйте функции стрелок ES6: https://babeljs.io/docs/learn-es2015/#arrows-and-lexical-this. Самый простой способ добиться того, что вы хотите, было бы сохранить this в переменной:

var self = this; 
var products = _.map(this.state.products, function(product){ 
      return(
      <Product key={product.id} product={product} handleDeleteProduct={self.deleteProduct} handleEditProduct={self.editProduct} formData={self.props.formData}/> 
     ) 
     }); 

Вы также можете использовать bind для достижения того же эффекта: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind