Javascript 原子地从数组中删除元素

Question

我是 javascript 和 Vuex 的新手。

我在一个table中有很多Orders（链接到state.runningOrders.data），然后我选择了这些订单并取消了它们（因此触发了CANCEL_ONE_ORDER）。当来自服务器的响应到达时，我只是从数组中删除了具有指定 id 的订单，因此相应的行将从 table 中消失。取消后应该没有行。但是，在视觉上，table.

中总是会留下一些 rows

我认为它像多线程或协程一样工作。所以 state.runningOrders.data 需要一些并发机制。

const actions = {
    async [CANCEL_ONE_ORDER](context, data) {
        const data_res = await RestClient.get("cancel_one_order", data.id +"/" + data.coin1+"/"+data.coin2);
        context.commit(CANCEL_ONE_ORDER_END, data_res.data);
    },
}

const mutations = {
[CANCEL_ONE_ORDER_END](state, res) {
        state.runningOrders.data = state.runningOrders.data.splice(state.runningOrders.data.findIndex(item => item.id === id), 1);
    },
}

如何以原子方式（同时）从数组中删除元素？

Answer 1

I think it works like multiple threads or coroutine.

不，JavaScript 每个领域运行一个线程（粗略地说，每个全局环境）。您可以有多个线程，但除了显式 shared memory 之外，它们不能访问相同的数据结构（相反，它们通过消息传递进行通信）。（如果函数 A 在 await 处暂停并且函数 B 继续，则 async 函数中的逻辑可以重叠。）

splice returns 已删除 元素的数组。 Yopu 正在将其分配回您的变量：

state.runningOrders.data = state.runningOrders.data.splice(state.runningOrders.data.findIndex(item => item.id === id), 1);

这与您似乎想要的相反：它使用您从中删除的元素数组更新 data，而不是使用您删除的元素想留着。

而是使用 filter:

state.runningOrders.data = state.runningOrders.data.filter(item => item.id !== id);

从匹配回调测试的元素创建一个新数组（在本例中，不具有匹配的id）。

Answer 2

我不确定我是否完全理解，但听起来你正试图从 table 中删除一行（因此，可能是数据库中的一个对象）并且你最终有一个空行。

根据该描述，我觉得您并不是在删除对象，而只是擦除对象中的数据。然后你留下一个空白对象，它正在创建你的空行。

Javascript 原子地从数组中删除元素

Javescript remove elements from Array atomically

javascript

vuex