javascript - 使用 onClick 事件从 Redux 存储中删除项目时出现问题

Question

我希望能够从我的存储中的数组中删除特定对象。我创建了一个可以运行并删除对象的删除项函数，但是当我使用一个通过 map 与每个对象一起呈现的按钮时，我无法弄清楚如何使该函数运行。这是我的组件:

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);

使用函数handleClick，我得到Uncaught TypeError: Cannot read property 'props' of null。如果我尝试类似的事情

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

...代码删除循环中的所有项目，没有任何错误。我如何使用该按钮删除该特定项目？

Answer 1

您真的收到了要删除的元素吗？

在 map 内的按钮上尝试一下:

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