3***@qq.com
3***@qq.com
  • 发布:2024-08-26 17:33
  • 更新:2024-08-26 17:33
  • 阅读:25

【报Bug】vendor.js? [sm]:3677 Maximum recursive updates exceeded in component

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 23H2

HBuilderX类型: 正式

HBuilderX版本号: 4.26

第三方开发者工具版本号: 4.24

基础库版本号: 1.06.2407110

项目创建方式: HBuilderX

操作步骤:

不知道是什么导致的调了三天了刚开始用的两个文件公用这个功能,然后他就报错这个关键是逐次注销代码一直找不到是什么问题,不知道是哪里出错了导致的递归

预期结果:

l

实际结果:

vendor.js? [sm]:3677 Maximum recursive updates exceeded in component <PieviewGoods>. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.(env: Windows,mp,1.06.2407110; lib: 3.5.5)

bug描述:

<template>
<view class="CommdtiyData" v-if="GoodsS && Object.keys(GoodsS).length">
<view class="title_image">
<image class="img" :src=GoodsS.goods_thumb mode="aspectFill"></image>
</view>
<view class="center">
<view class="GoodsRend">

            <view class="head">  
                <text class="name">{{GoodsS.goods_name}}</text>  
                <view class="moneyBox">  
                    <text class="money">  
                        <text class="qian"><text class="fuhao">¥</text>{{GoodsS.goods_money}}</text>  
                        <text class="num">数量: <text class="shuL">{{GoodsS.goods_money}}</text></text>  
                    </text>  
                </view>  
            </view>  
            <view class="toby">  
                <h2 class="h2">坦诚的摊主</h2>  
                <text class="zishu">摊主自述:<text class="neirong">{{GoodsS.goods_component}}</text></text>  
                <text class="zishu">份量:<text class="neirong">{{GoodsS.goods_weight}}</text></text>  
                <text class="zishu">商品描述:<text class="neirong">{{GoodsS.goods_composition}}</text></text>  
            </view>  

        </view>  
    </view>  
</view>  

<view class="bottomBox" v-if="GoodsS && Object.keys(GoodsS).length">  
    <view class="bottom" v-if="state===false">  

        <view class="shop" @click="gotoSellerPage(GoodsS)">  
            <uni-icons class="location" type="shop" size="27" color="#f11"></uni-icons>  
            <text>摊主</text>  
        </view>  

        <view class="service">  
            <uni-icons class="locationS" fontFamily="Service" :size="22" color="#f11">&#xe60c;</uni-icons>  
            <text class="ser">客服</text>  
        </view>  
        <view class="buy" @click="open()">立刻下单</view>  

    </view>  

    <view class="bottom2" v-if="state=== true">  
        <view class="image" @click="GoodsInformation()">  
            <image class="logo" src="../../static/1111.png" mode="aspectFit"></image>  
            <text  v-if="selectedIndex!==null" class="moneyCC"><text class="fuCC">&yen;</text>{{money_tall(order)}}</text>  
        </view>  

        <text class="settlement">结算</text>  
    </view>  

    <uni-popup ref="popup" class="popup" type="bottom" backgroundColor="#f3f2f2" border-radius="10px 10px 0 0">  
        <view class="itemCommodity">  

            <view class="iconimg">  
                <image class="iconimg" :src="GoodsS.goods_thumb" mode="aspectFit"></image>  
            </view>  

                <view class="infromationData">  
                    <view class="title">  
                        <h1 class="h1">{{GoodsS.goods_name}}</h1>  
                    </view>  

                    <view class="tbody">  
                        <text>商家描述:{{GoodsS.goods_desc}}</text>  
                        <text class="money"> <text class="fu">&yen; </text>{{GoodsS.goods_money}} </text>  
                    </view>  
                </view>  
        </view>  

        <view class="parameter">  
            <text>套餐</text>  
            <view class="parconterBox">  

                <view   
                    class="parconter"   
                    :style="{ borderColor: selectedIndex === Pindex ? 'red' : border }"   
                    @click="selectItem(Pindex)"  
                    v-for="(Pitem,Pindex) in GoodsS.goods_Package"  
                    :key="Pindex"  
                >  
                    <text class="ttt1">{{ Pitem.Package_name }}</text>  
                    <text class="moneyS" :style="{ borderColor: selectedIndex === Pindex ? 'red' : border }"> <text class="fuS">&yen; </text>{{Pitem.Package_money}} </text>  
                </view>  

            </view>  
            <text>口味</text>  
            <view class="parconterBox">  

                <view   
                    class="parconter"   
                    :style="{ borderColor: selectedIndex2 === Kindex ? 'red' : border }"   
                    @click="selectItem2(Kindex)"  
                    v-for="(kitem,Kindex) in GoodsS.goods_Package"  
                    :key="Kindex"  
                    >  
                    <text class="ttt2">{{kitem.Page_taste}}</text>  
                </view>  

            </view>  
            <view class="numbox">  
                <text class="num">数量</text>  
                <text class="qqq">  
                    <text class="www" @click="numReduce()">&minus;</text>  
                    <text class="eee">{{Goods_num}}</text>  
                    <text class="rrr" @click="numGaga()">&plus;</text>  
                </text>  
            </view>  

        </view>  

        <view class="fuqian">  
            <text class="text2" @click="Cart()">加入购物车</text>  
        </view>  

    </uni-popup>  

    <uni-popup ref="infromation" v-if="order.length >= 0"  type="bottom" backgroundColor="#f3f2f2" border-radius="10px 10px 0 0">  
        <view class="infromationPoput">  
            <text class="titlech">购物车</text>  
            <uni-icons class="transh" type="trash" color="#f11" size="25"></uni-icons>  
        </view>  
            <view class="infromationpopup" v-for="(item,index) in order" :key="index">  
                <image class="n_image" :src=item.goods_thumb mode="aspectFill"></image>  
                <view class="textbox">  
                    <text class="name">&#12304;{{item.itemgoods_Package[selectedIndex].Package_name}}&#12305;</text>  
                    <text class="taste">{{item.goods_Package[selectedIndex2].Page_taste}}</text>  
                    <view class="jiajia">  
                        <text class="money">{{item.goods_Package[selectedIndex2].Package_money}}</text>  
                <text class="qqq">  
                    <text class="www" @click="numReducenumReduce(index)">&minus;</text>  
                    <text class="eee">{{Goods_num}}</text>  
                    <text class="rrr" @click="numGaga(index)">&plus;</text>  
                </text>  
                    </view>  
                </view>  
            </view>  
    </uni-popup>  
</view>  

</template>

<script setup>
import { ref } from 'vue';
import CommodityDataStore from '../pinia/SerchInerface.js'
const CommodityData = CommodityDataStore();
const Goods = CommodityData.SerchData;
const order = CommodityData.orderData;
console.log('props',order)
console.log('props',Goods)

const popup = ref()
const infromation = ref()
const state = ref(false);

let Goods_num = ref(1)
let GoodsS = ref('')
let border = ref('#eee')
let selectedIndex = ref(null); // 新增选中索引
let selectedIndex2 = ref(null); // 新增选中索引

if(Goods.Seller_total_goods){
GoodsS.value = Goods.Seller_total_goods[0];
console.log("11111111",GoodsS);
}else{
GoodsS.value = Goods;
console.log("222222222",GoodsS.value);
}

function gotoSellerPage(data){
if(data.Cheap_goods === true){

    console.log("而是滴哦建安二十的房间啊",data.goods_Seller)  
    CommodityData.SerchData = data.goods_Seller[0]  
    uni.navigateTo({  
        url:"/pages/src/SellerPage"  
    })  
}else{  
    uni.navigateBack()  
}  

}
function open(){
popup.value.open();
}

function selectItem(index) {
selectedIndex.value = index; // 更新选中索引
}
function selectItem2(index) {
selectedIndex2.value = index; // 更新选中索引
}
function GoodsInformation(){

infromation.value.open();  

}

function money_tall(num){
let tall = ref(0)
num.forEach((item)=>{
tall.value += (Number(item.money) * Number(item.num));
})
return tall.value
}

function Cart(){

if(selectedIndex.value !== null && selectedIndex2.value !== null && Goods_num.value >0){  

    order.push({  
        "src": Goods.goods_thumb,  
        "name": Goods.goods_Package[selectedIndex.value].Package_name,  
        "money": Goods.goods_Package[selectedIndex.value].Package_money,  
        "taste": Goods.goods_Package[selectedIndex2.value].Page_taste,  
        "num": Goods_num.value  
    });  
    popup.value.close();  
    state.value = true;  
    console.log('orderorderorderorder',order);  
}else{  
    uni.showToast({  
        title: "请选择规格",  
        icon: 'none' // 设置为 'none' 以不显示图标  
    });  
}  
console.log("当前状态:", state.value); // 调试输出  

}

function numReduce(index = null) {
Goods_num.value--;
if (index !== null && order[index]) {
order[index].num = Goods_num.value;
} else {
console.error('Invalid index for reduce:', index);
}
if (Goods_num.value <= 0) {
Goods_num.value = 0;
state.value = false;
infromation.value.close();
}
}

function numGaga(index = null) {
Goods_num.value++;
if (index !== null && order[index]) {
order[index].num = Goods_num.value;
} else {
console.error('Invalid index:', index);
}

if (Goods_num.value > GoodsS.goods_number) {  
    uni.showToast({  
        title: '摊主库存不多了',  
        icon: 'none'  
    });  
    Goods_num.value--; // 如果超出库存,减少数量  
}  

}

function closetall(){
infromation.value.close();
Goods_num.value = 1;
state.value = false;
console.log("当前状态:", state.value); // 调试输出
}
</script>

<style scoped lang="scss">

@font-face {
font-family: Service;
src: url('/static/Service.ttf') format('truetype');
}

.CommdtiyData{
width: 100%;
height: 100vh;
background-color: $backColor;
.title_image{
.img{
width: 100%;
height: 45vh;
border-bottom-right-radius: 10rpx;
border-bottom-left-radius: 10rpx;
}
}
.center{
padding-left: 20rpx;
padding-right: 20rpx;
background-color: $backColor;
.GoodsRend{
margin-top: 10rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;

        .head{  
            margin-top: 20rpx;  
            display: flex;  
            flex-direction: column;  
            justify-content: center;  
            align-content: flex-start;  
            background-color: #fff;  
            border-radius: 25rpx;  
            padding: 25rpx;  
            .name{  
                font-weight: 600;  
                font-size: 40rpx;  
            }  
            .moneyBox{  
                margin-top: 20rpx;  
                font-weight: 500;  
                display: flex;  
                flex-direction: row;  
                justify-content: space-between;  
                align-items: center;  
                .money{  
                    color: #f00;  
                    .qian{  
                        font-size: 46rpx;  
                        display: flex;  
                        flex-direction: column;  
                        justify-content: center;  
                        align-items: center;  
                    }  
                    .fuhao{  
                        font-size: 32rpx;  
                    }  
                }  
                .num{  
                    margin-left: 20rpx;  
                    font-size: 25rpx;  
                    color: #685658;  
                    .shuL{  
                        color: #aab;  
                    }  
                }  
            }  

        }  

        .toby{  
            margin-top: 30rpx;  
            display: flex;  
            flex-direction: column;  
            justify-content: center;  
            align-content: flex-start;  
            background-color: #fff;  
            padding: 25rpx;  
            border-radius: 25rpx;  

            .h2{  
                font-size: 36rpx;  
                font-weight: 600;  
            }  

            .zishu{  
                margin-top: 15rpx;  
                font-size: 30rpx;  
                color: #345;  

                .neirong{  
                    text-align: center;  
                    font-size: 24rpx;  
                    color: #567;  
                }  
            }  

        }  

        .gouwuche{  
            position: fixed;  
            right: 20rpx;  
            bottom: 15%;  
        }  
    }  
}  

}
.bottomBox{
position: fixed;
z-index: 1;
bottom: 0rpx;
background-color: #fff;
width: 100%;
.bottom{
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
margin-top: 20rpx;
margin-bottom: 40rpx;
.service,.shop{
margin-left: 30rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 25rpx;
.locationS{
}
.ser{

        }  
    }  
    .buy{  
        margin-left: 30rpx;  
        font-size: 36rpx;  
        font-weight: 500;  
        padding: 20rpx 150rpx;  
        color: #fff;  
        border-radius: 25rpx;  
        background-color: #f11;  
    }  
}  
.bottom2{  
    background-color: #fff;  
    display: flex;  
    flex-direction: row;  
    justify-content: space-around;  
    align-items: center;  
    .image{  
        display: flex;  
        flex-direction: row;  
        justify-content: center;  
        align-items: center;  
        .logo{  
            height: 100rpx;  
            width: 100rpx;  
            padding: 20rpx 10rpx;  
        }  
        .moneyCC{  
              font-size: 36rpx;  
              display: block;  
              color: #f44;  
              .fuCC{  
                  font-size: 30rpx;  
              }  
        }  
    }  
    .settlement{  
        padding: 25rpx 150rpx;  
        border-radius: 100rpx;  
        color: #fff;  
        font-size: 32rpx;  
        background-color: #d80110;  
    }  
}  
.popup{  

    .itemCommodity{  
        padding: 20rpx;  
        border-radius: 20rpx;  
        background-color: #fff;  
        display: flex;  
        flex-direction: row;  
        justify-content: flex-start;  
          .iconimg{  
              width: 140rpx;  
              height: 140rpx;  
              border-radius: 10rpx;  
              padding-top: 10rpx;  
              padding-left: 10rpx;  
          }  

          .infromationData{  
              overflow: hidden;  
               padding-top: 10rpx;  
               padding-left: 30rpx;  
                  .title{  

                    display: flex;  
                    white-space: nowrap;  
                    .h1{  
                        font-size: 36rpx;  
                        font-weight: 500;   
                    }  
                  }  
                  .tbody{  
                      overflow: hidden;  
                      padding-top: 15rpx;  
                      color: #677;  
                      .money{  
                          padding-top: 15rpx;  
                          font-size: 30rpx;  
                          display: block;  
                          color: #f44;  
                          .fu{  
                              font-size: 20rpx;  
                          }  
                      }  
                  }  
          }  
    }  

    .parameter {  
        display: flex;  
        flex-direction: column;  
        justify-content: flex-start;  
        margin-top: 20rpx;  
        margin-bottom: 200rpx;  
        font-size: 32rpx;  
        padding: 20rpx;  
        border-radius: 25rpx;  
        background-color: #fff;  
        .parconterBox {  
            margin-top: 20rpx;  
            margin-bottom: 20rpx;  
            display: flex;  
            flex-direction: row;  
            justify-content: space-evenly;  
            align-content: center;  
            flex-wrap: wrap;  
            color: #234;  
            .parconter {  
                display: flex;  
                flex-direction: row;  
                justify-content: center;  
                align-content: center;  
                margin-top: 40rpx;  
                margin-right: 15rpx;  
                border: solid #f11 1rpx;  
                border-radius: 15rpx;  
                .ttt1{  
                    padding: 10rpx 15rpx;   
                    font-size: 24rpx;  
                }  
                .ttt2{  
                    padding: 10rpx 30rpx;   
                    font-size: 24rpx;  
                }  
                .moneyS{  
                    color: #f00;  
                    font-size: 24rpx;  
                    line-height: 45rpx;  
                    padding: 5rpx 10rpx;  
                    border-left: solid #f11 1rpx;  
                    .fuS{  
                        text-align: center;  
                    }  
                }  
            }  
        }  
    }  
    .numbox{  
        display: flex;  
        flex-direction: row;  
        justify-content: space-between;  
        align-items: center;  
        margin-top: 20rpx;  
        margin-bottom: 20rpx;  
        .qqq {  
            margin-right: 20rpx;  
            display: flex; /* 使用flex布局 */  
            align-items: center; /* 垂直居中对齐 */  

            .www {  
                font-size: 35rpx;  
                padding: 0rpx 10rpx;  
                border-radius: 100%;  
                border: solid #f44 5rpx;  
                color: #f11;  
                line-height: 40rpx;  
            }  

            .eee {  
                padding: 25rpx;  
                font-size: 32rpx;  
                color: #333; /* 改变颜色以提高可读性 */  
                text-align: center; /* 文本居中 */  
                margin: 0 10rpx; /* 添加左右间距 */  
            }  

            .rrr {  
                padding: 5rpx 15rpx;  
                font-size: 35rpx;  
                border-radius: 100%;  
                color: #fff;  
                line-height: 40rpx;  
                background-color: #f11;  
            }  
        }  
    }  
    .fuqian{  
        display: flex;  
        justify-content: center;  

        .text2{  
            width: 90%;  
            height: 70rpx;  
            line-height: 70rpx;  
            border-radius: 25rpx;  
            font-size: 28rpx;  
            text-align: center;  
            color: #eee;  
            background-color: #d80110;  
        }  
    }  
}  

.infromationPoput{  
    display: flex;  
    flex-direction: row;  
    justify-content: space-between;  
    align-content: center;  
    .titlech{  
        padding: 20rpx;  
        font-size: 36rpx;  
        font-weight: 500;  
        color: #d80110;  
    }  
        .transh {  
            padding: 20rpx;  
        }  
}  
    .infromationpopup{  
        display: flex;  
        flex-direction: row;  
        justify-content: flex-start;  
        align-content: center;  
        margin: 20rpx;  
        background-color: #fff;  
        border-radius: 25rpx;  
            .n_image{  
                width: 100rpx;  
                height: 100rpx;  
                border-radius: 15rpx;  
                padding: 20rpx;  
            }  
            .textbox{  
                display: flex;  
                flex-direction: column;  
                justify-content: center;  
                align-content: center;  
                width: 100%;  
                .name{  
                    font-size: 30rpx;  
                    color: #000;  
                    font-weight: 500;  
                }  
                .taste{  
                    font-size: 23rpx;  
                    color: #888;  
                    margin-top: 6rpx;  
                    margin-left: 20rpx;  
                }  
                .jiajia{  
                    display: flex;  
                    flex-direction: row;  
                    justify-content: space-between;  
                    align-content: center;  
                    width: 100%;  
                    .money{  
                        font-size: 30rpx;  
                        color: #f22;  
                        margin-top: 6rpx;  
                        margin-left: 20rpx;  
                    }  

                    .qqq {  
                        margin-right: 20rpx;  
                        display: flex; /* 使用flex布局 */  
                        align-items: center; /* 垂直居中对齐 */  

                        .www {  
                            display: inline-block;  
                            padding: 10rpx 20rpx;  
                            font-size: 40rpx;  
                            border-radius: 100%;  
                            border: solid #f44 1rpx;  
                            color: #f11;  
                            line-height: 40rpx;  
                        }  

                        .eee {  
                            display: inline-block;  
                            padding: 25rpx;  
                            font-size: 32rpx;  
                            color: #333; /* 改变颜色以提高可读性 */  
                            text-align: center; /* 文本居中 */  
                            margin: 0 10rpx; /* 添加左右间距 */  
                        }  

                        .rrr {  
                            display: inline-block;  
                            padding: 10rpx 15rpx;  
                            font-size: 40rpx;  
                            border-radius: 100%;  
                            color: #fff;  
                            line-height: 40rpx;  
                            background-color: #f11;  
                        }  
                    }  

                }  

            }  
    }  

}
</style>

2024-08-26 17:33 负责人:无 分享
已邀请:

要回复问题请先登录注册