反應 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  });