Issue with delete functionality ReactJS: TypeError: Cannot read property 'removeProduct' of undefined

Question

我得到了道具附带的产品映射到 table 中显示，但是当我单击按钮时，我无法使用按钮中的 onClick 方法访问 removeProduct(product) 方法。我收到如下错误：

TypeError: Cannot read property 'removeProduct' of undefined
    at ProductsDashboard.js:53
    at immutable.js:3018
    at List.__iterate (immutable.js:2208)
    at IndexedIterable.mappedSequence.__iterateUncached (immutable.js:3017)
    at seqIterate (immutable.js:606)
    at IndexedIterable.IndexedSeq.__iterate (immutable.js:322)
    at IndexedIterable.toArray (immutable.js:4260)
    at new List (immutable.js:2067)
    at reify (immutable.js:3572)
    at List.map (immutable.js:4403)    

//ProductsDashboard.js

的代码

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { loadProducts, removeProduct } from '../../actions/products_actions';
import { bindActionCreators } from 'redux';

class ProductsDashboard extends Component {
  componentWillMount() {
    this.props.loadProducts();
  }

  removeProduct(product) {
    this.props.removeProduct(product);
  }

  render() {
    if (!this.props.products) {
      return <div>Producten worden geladen</div>;
    }

    return (
      <div>
        <a href="#/dashboard/products/add" class="btn btn-sm btn-success pull-right" style={{marginBottom: '20px'}}>Product toevoegen</a>

        <div style={{marginBottom: '20px'}}>
          <input class="form-control" type="text" placeholder="Zoek product" />
        </div>
        <div class="table-responsive">
          <table class="table table-striped table-condensed">
            <thead>
              <tr>
                <td>Id</td>
                <td>Barcode</td>
                <td>Naam</td>
                <td>Omschrijving</td>
                <td>Prijs</td>
                <td>Volume</td>
                <td>Eenheid</td>
              </tr>
            </thead>
            <tbody>
              { this.props.products.map(function(product, index) {
                  var editUrl = `#/dashboard/products/edit/${product.get('id')}`;
                  return(
                    <tr key={index}>
                      <td>{product.get('id')}</td>
                      <td>{product.get('barcode')}</td>
                      <td>{product.get('name')}</td>
                      <td>{product.get('description')}</td>
                      <td>{product.get('price')}</td>
                      <td>{product.get('volume')}</td>
                      <td>{product.get('unit')}</td>
                      <td><a href={editUrl} class="btn btn-sm btn-primary">Wijzigen</a></td>
                      <td><button onClick={ this.removeProduct.bind(null, product) } class="btn btn-sm btn-danger">Verwijderen</button></td>
                    </tr>
                  )
                })
              }
            </tbody>
          </table>
        </div>
      </div>
    )
  }
}

function mapDispatchToPorps(dispatch) {
  return bindActionCreators({ loadProducts, removeProduct }, dispatch);
}

function mapStateToProps(state) {
  return {
    products: state.products.get('products')
  }
}

export default connect(mapStateToProps, mapDispatchToPorps)(ProductsDashboard);

Answer 1

this 在 Array.prototype.map 的回调中是 undefined 除非另有说明：

If a thisArg parameter is provided to map, it will used as callback's this value. Otherwise, the value undefined will be used as its this value. The this value ultimately observable by callback is determined according to the usual rules for determining the this seen by a function.

Source

---

要解决此问题，请为 thisArg 传递一个值：

{ this.props.products.map(function(product, index) {
    var editUrl = `#/dashboard/products/edit/${product.get('id')}`;
        return(
            <tr key={index}>
                <td>{product.get('id')}</td>
                <td>{product.get('barcode')}</td>
                <td>{product.get('name')}</td>
                <td>{product.get('description')}</td>
                <td>{product.get('price')}</td>
                <td>{product.get('volume')}</td>
                <td>{product.get('unit')}</td>
                <td><a href={editUrl} class="btn btn-sm btn-primary">Wijzigen</a></td>
            <td><button onClick={ this.removeProduct.bind(null, product) } class="btn btn-sm btn-danger">Verwijderen</button></td>
        </tr>
    )
}, this)}