Reactjs Can'；t从我的存储中删除元素并升级我的组件

这是我的组件，我只列出了一些元素

import React, {Component} from "react";

import {connect} from "react-redux";
import { delFruit} from "../../js/actions/index";

function mapDispatchToProps(dispatch)
{
    console.log(dispatch);
    return {
        delFruit: fruits => dispatch(delFruit(fruits))
    };
}

const mapStateToProps = state => {
    return {fruits: state.fruits};
};



class ConnectedList extends Component {
    constructor()
    {
        super();
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(el)
    {
        this.props.delFruit(el)
    }

    render()
    {
        // const fruits = this.state.fruits

        return (
            <div>
                <div className="title">Liste des courses</div>
                <ul className="list-group list-group-flush">
                    {
                        this.props.fruits.map((el, key) => (
                            <li key={key}>
                                {el.name} <i>( {el.price} € )</i> <i className="delete"  onClick={this.handleClick.bind(this, key)}></i>
                            </li>
                        ))
                    }
                </ul>
            </div>
        );

    }
}


const List = connect(mapStateToProps, mapDispatchToProps)(ConnectedList);

export default List;

当我检查组件的状态时，元素被正确删除（在示例2中）

但我的组件不会将其从列表中删除

我唯一能让它工作的方法就是这样做

return Object.assign({}, {}, {
            fruits:state.fruits.concat()
        });

而不是

return Object.assign({}, {}, {
            fruits:state.fruits
        });

• 为什么我的组件在没有concat（）的情况下不更新
• 这样做的好方法是什么
• 为什么我的数组在删除后保留空值

---

您可以使用spread运算符删除该值。下面是一个基本的代码片段，展示了如何做到这一点

const state={
水果：[1,2,3]
}
常量动作={
索引：1
}
常数newState=[
…state.fruits.slice（0，action.index），
…状态.水果.切片（action.index+1）
];
console.log（newState）非常感谢！它就像一个符咒，你能解释一下为什么我的代码会给我这个结果吗？
return Object.assign({}, {}, {
            fruits:state.fruits
        });