ZBLOG

useEffect(() => { if (!initData || !initData?.serviceDetailList?.length) return let arrFilter = [] //选中的服务 initData?.serviceDetailList?.forEach((item) => { item?.serviceList?.forEach((service) => { if (service.num)...

在你的代码中,arrFilter 使用 unshift() 方法来添加元素。使用 unshift() 会把新元素插入到数组的开头,而不是末尾。这意味着每次调用 unshift() 时,新的对象都会被放在数组的最前面,因此最终的 arrFilter 数组将是反向排列的,即与源数据的顺序相反。

为什么会这样?

  1. unshift() 的特性:正如你所使用的那样,arrFilter.unshift(...) 会导致数组中的元素按照相反的顺序排列。这是因为它每次都将新元素添加到数组开头。

  2. 遍历顺序:你对 serviceDetailList 和每个服务列表的遍历,是按原始顺序进行的。但是,由于你是在前面插入数据,最终结果看起来就像是倒序了。

如何保持插入顺序

如果希望 arrFilter 按照原始数据顺序构建,你可以使用以下两种方法之一:

  1. 使用 push(): 直接用 push() 来保持插入顺序,将元素添加到数组末尾:

    1. arrFilter.push({
    2. category: item?.category,
    3. categoryName: item?.categoryName,
    4. serviceId: service?.serviceId,
    5. goodsId: service?.goodsId,
    6. goodsAmount: Number(item?.serviceValue) ? Number(item?.serviceValue) : 0,
    7. serviceName: service?.serviceName,
    8. serviceNum: service?.num,
    9. subSelectList: service?.subSelectList || [],
    10. });
  2. 在遍历结束后翻转数组: 如果你必须要用 unshift() 并想保留最终结果为原始顺序,你可以在处理完所有服务后再调用一次 .reverse() 方法。

    1. arrFilter.reverse(); // 在最后翻转一次

示例代码修改

下面是修正后的关键部分,确保了按原始顺序收集数据:

  1. useEffect(() => {
  2. if (!initData || !initData.serviceDetailList.length) return;
  3. let arrFilter = []; //选中的服务
  4. initData.serviceDetailList.forEach((item) => {
  5. item.serviceList.forEach((service) => {
  6. if (service.num) {
  7. arrFilter.push({ // 改为 push() 保持插入顺序
  8. category: item.category,
  9. categoryName: item.categoryName,
  10. serviceId: service.serviceId,
  11. goodsId: service.goodsId,
  12. goodsAmount: Number(item.serviceValue) ? Number(item.serviceValue) : 0,
  13. serviceName: service.serviceName,
  14. serviceNum: service.num,
  15. subSelectList: service.subSelectList || [],
  16. });
  17. }
  18. });
  19. // 以下部分保持不变...
  20. });
  21. console.log('初始化initData', initData);
  22. console.log(`'arrFilter`, arrFilter);
  23. setSelectedItemList(arrFilter);
  24. }, [initData]);

通过上述修改,arrFilter 将保持和输入数据相同的顺序。希望这能解决你的问题!如果还有其他疑问,请继续提问。


内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=20831

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?