onClickイベントを使用してReduxストアからアイテムを削除する際の問題

Question

storeの配列から特定のオブジェクトを削除したいと考えています。私はオブジェクトを削除してオブジェクトを削除するアイテムの削除機能を作ったが、mapの各オブジェクトでレンダリングされたボタンを使用すると、この機能を動作させる方法を見つけ出すことができなかった。私はUncaught TypeError: Cannot read property 'props' of nullを取得する機能​​で

import React, { Component } from 'react'; 
import {addCart} from './Shop'; 
import { removeCart } from '../../actions'; 
import { connect } from 'react-redux'; 

export class Cart extends Component { 
    constructor(props) { 
     super(props); 
     this.state = {items: this.props.cart,cart: [],total: 0}; 
    } 

    handleClick(item) { 
     this.props.onCartRemove(item); 
    } 

    ... 


    render() { 
     return(
      <div className= "Webcart" id="Webcart"> 
       <div> 
        {this.state.items.map((item, index) => { 
         return <li className='cartItems' key={'cartItems_'+index}> 
          <h4>{item.item}</h4> 
          <p>Size: {item.size}</p> 
          <p>Price: {item.price}</p> 
          <button onClick={this.handleClick}>Remove</button> 
         </li> 
})} 
       </div> 
       <div>Total: ${this.countTotal()}</div> 
      </div> 
     ); 
    } 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
     onCartAdd: (cart) => { 
      dispatch(addCart(cart)); 
     }, 
     onCartRemove: (item) => { 
      dispatch(removeCart(item)); 
     }, 
    } 
} 

function mapStateToProps(state) { 
    return { cart: state.cart }; 
} 

export default connect(mapStateToProps, mapDispatchToProps)(Cart); 

：これは私のコンポーネントです。もし私が何かを試してみたら

deleteItem() { 
     return this.state.items.reduce((acc, item) => { 
      return this.props.onCartRemove(item); 
     }) 
    } 

...コードはループ内のすべての項目をエラーなく削除します。ボタンを使用して特定のアイテムを削除するにはどうすればよいですか？

Answer 1

、それを削除するために、あなたは本当にアイテムを取得していますか？

は、マップ内のボタンにこの方法を試してください。

<button onClick={() => this.handleClick(item)}>Remove</button> 

Answer 2

ハンドラをバインドする必要があります。

constructor(props) { 
    super(props); 
    this.state = {items: this.props.cart,cart: [],total: 0}; 
    this.handleClick = this.handleClick.bind(this); 
} 

https://facebook.github.io/react/docs/handling-events.html