反应 lodash 删除不起作用

Question

我有一个包含对象的state 。 我还有一个删除 api，它根据object property从state中删除一个对象。 这是代码：

deleteItem(item_to_delete){
    const del_item = _.find(this.state.bucket_list, bucklistitem => bucklistitem.name === item_to_delete);
    fetch(url(this.props.api) + '/' + del_item._id, {
        method: "DELETE",
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        },
    });

    _.remove(this.state.bucket_list, bucketlistitem => bucketlistitem.name === item_to_delete);
    this.setState({ bucket_list: this.state.bucket_list });
}

但是我知道我目前将state视为可变的，这很糟糕。 因此，我想通过创建state的副本、更改副本和setState来更改我的代码。 这是代码：

deleteItem(item_to_delete){
    let bucket_list_copy = Object.assign({}, this.state.bucket_list); //Copy of state
    const del_item = _.find(bucket_list_copy, bucklistitem => bucklistitem.name === item_to_delete);
    fetch(url(this.props.api) + '/' + del_item._id, {
        method: "DELETE",
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        },
    });

    _.remove(bucket_list_copy, { name: item_to_delete });
    this.setState({ bucket_list: bucket_list_copy });
}

但是，尽管这会从数据库中删除对象，但不会将其从copied list删除。 有任何想法吗？

Answer 1

改变这一行

_.remove(bucket_list_copy, {name: item_to_delete});

对此

_.remove(bucket_list_copy, bucketlistitem => bucketlistitem.name === item_to_delete);

如果您查看Lodash 文档，remove 不接受对象作为第二个参数。

Answer 2

您可以使用 splice 跳过几个步骤

const delItemIndex = _.findIndex(this.state.bucket_list, bucklistitem => bucklistitem.name === item_to_delete);
let newBucketList = this.state.bucket_list.splice(delItemIndex, 1);

fetch(url(this.props.api) + '/' + this.state.bucket_list[delItemIndex]._id, {
    method: "DELETE",
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
    },
});

this.setState({ bucket_list: newBucketList  });