如何在循环中设置状态?

Question

我想遍历一个数组，并为每个项目调用一个函数，该函数确实setState。我尝试了以下代码：

const approveOrder = uniqueId => {
if (approvedList.indexOf(uniqueId) < 0) {
setApprovedList(approvedList.concat(uniqueId));
}
};
const approveAllOrders = data => {
data.forEach(dataItem => {
approveOrder(dataItem.unique_id);
});
};

但是在上面的函数approveAllOrders之后，我的列表approvedList只包含一个项目，这是我数据的最后一项，我传递给了函数。我知道setState不是即时的，这就是它发生的原因。那么，我该怎么做才能使我的代码正常工作呢？

Answer 1

应使用功能状态更新，以便多个排队更新从以前的状态正确更新。

const approveOrder = uniqueId => {
if (approvedList.indexOf(uniqueId) < 0) {
setApprovedList(approvedList => approvedList.concat(uniqueId));
}
};

或者，您可以按当前状态中未包含的 id 过滤/映射数据，并更新状态一次。

const approveAllOrders = data => {
const newDataIds = data.filter(dataItem => {
return approvedList.indexOf(dataItem.unique_id) < 0;
}).map(({ unique_id }) => unique_id);
setApprovedList(approvedList => [...approvedList, newDataIds]);
};

或

const approveAllOrders = data => {
const newDataIds = data.filter(dataItem => {
return !approvedList.includes(dataItem.unique_id);
}).map(({ unique_id }) => unique_id);
setApprovedList(approvedList => [...approvedList, newDataIds]);
};

Answer 2

您可以先创建所有订单的列表，然后更新状态。您不需要有 2 个函数来执行此操作。

const approveAllOrders = data => {
const orders = [];
data.forEach(dataItem => {
if (approvedList.indexOf(dataItem.unique_id) < 0) {
orders.push(dataItem);
}
});
setApprovedList([...approvedList, ...orders]);
};

Answer 3

你也可以在这里使用reduce。

const res = data.reduce( (res, dataItem) => {
if(!res.includes(dataItem.unique_id)) {
res.push(dataItem.unique_id)
}
return res
})
setApprovedList(res)