在你的代码中，arrFilter 使用 unshift() 方法来添加元素。使用 unshift() 会把新元素插入到数组的开头，而不是末尾。这意味着每次调用 unshift() 时，新的对象都会被放在数组的最前面，因此最终的 arrFilter 数组将是反向排列的，即与源数据的顺序相反。
为什么会这样？
unshift()的特性：正如你所使用的那样，arrFilter.unshift(...)会导致数组中的元素按照相反的顺序排列。这是因为它每次都将新元素添加到数组开头。遍历顺序：你对
serviceDetailList和每个服务列表的遍历，是按原始顺序进行的。但是，由于你是在前面插入数据，最终结果看起来就像是倒序了。
如何保持插入顺序
如果希望 arrFilter 按照原始数据顺序构建，你可以使用以下两种方法之一：
使用
push()： 直接用push()来保持插入顺序，将元素添加到数组末尾：arrFilter.push({ category: item?.category, categoryName: item?.categoryName, serviceId: service?.serviceId, goodsId: service?.goodsId, goodsAmount: Number(item?.serviceValue) ? Number(item?.serviceValue) : 0, serviceName: service?.serviceName, serviceNum: service?.num, subSelectList: service?.subSelectList || [], });在遍历结束后翻转数组： 如果你必须要用
unshift()并想保留最终结果为原始顺序，你可以在处理完所有服务后再调用一次.reverse()方法。arrFilter.reverse(); // 在最后翻转一次
示例代码修改
下面是修正后的关键部分，确保了按原始顺序收集数据：
useEffect(() => {
if (!initData || !initData.serviceDetailList.length) return;
let arrFilter = []; //选中的服务
initData.serviceDetailList.forEach((item) => {
item.serviceList.forEach((service) => {
if (service.num) {
arrFilter.push({ // 改为 push() 保持插入顺序
category: item.category,
categoryName: item.categoryName,
serviceId: service.serviceId,
goodsId: service.goodsId,
goodsAmount: Number(item.serviceValue) ? Number(item.serviceValue) : 0,
serviceName: service.serviceName,
serviceNum: service.num,
subSelectList: service.subSelectList || [],
});
}
});
// 以下部分保持不变...
});
console.log('初始化initData', initData);
console.log(`'arrFilter`, arrFilter);
setSelectedItemList(arrFilter);
}, [initData]);
通过上述修改，arrFilter 将保持和输入数据相同的顺序。希望这能解决你的问题！如果还有其他疑问，请继续提问。
内容由零声教学AI助手提供，问题来源于学员提问
