时间戳

首页 > 解决方案 > JavaScript 以原子方式从 Array 中删除元素

javascript - JavaScript 以原子方式从 Array 中删除元素

问题描述

我是 javascript 和 Vuex 的新手。

我Orders在一个表中有很多（链接到state.runningOrders.data），然后我选择了这些订单并取消了它们（从而触发了CANCEL_ONE_ORDER）。当来自服务器的响应到达时，我只是从数组中删除了具有指定 id 的订单，因此对应的行将从表中消失。取消后应该没有行。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);
    },
}

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

标签： javascriptvuex

解决方案

我认为它像多线程或协程一样工作。

不，JavaScript 每个领域（大致上，每个全局环境）运行一个线程。您可以拥有多个线程，但除了显式共享内存之外，它们不能访问相同的数据结构（相反，它们通过消息传递进行通信）。（如果函数 A 在 a 处暂停而函数 B 继续，则函数中的逻辑async可能会重叠。）await

splice返回已删除元素的数组。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）。

推荐阅读