相关平台

微信小程序

复现仓库

https://github.com/magixsource/icycling-web.git
小程序基础库: 3.3.5
使用框架: Vue 3

复现步骤

在基于官方脚手架，选择vue3-NutUI4模板，初始化项目后。按照官方文档 https://docs.taro.zone/en/docs/virtual-waterfall 的指示，在app.js中注册waterfall组件。然后在index.vue页面中的template部分，填入

<virtual-waterfall
        class="List"
        :height="500"
        :item-data="state.list"
        :item-count="10"
        :item-size="100"
        :item="Row"
        width="100%"
      />

在script部分填入

<script setup>
           import { ref,reactive,onMounted,markRaw } from 'vue';
           import Taro from '@tarojs/taro'
           import { GET } from '../../http/http'
           import Row from './row.vue'
 
     const state = reactive({
         keyword: '',
         page: -1,
         size: 20,
         lastSize: 0,
         list: [],
       });
     
 onMounted(() => {
     const params = {}
     params.page = state.page   1;
     params.size = state.size;
     params.sort = "id,desc";
 
     GET({
       params: params,
       url: '/api/demo/article/list',
       success: function (res) {
         state.list = state.list.concat(res.data);
         state.page = state.page   1;
         state.lastSize = res.data.length;
       },
       fail: function () {
       }
     });
   });
 
 </script>

期望结果

如官方示例一般，显示文章瀑布样式

实际结果

WAServiceMainContext.js?t=wechat&s=1711929485293&v=3.3.5:1 Error: MiniProgramError
"Maximum recursive updates exceeded. 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."
    at Object.errorReport (WAServiceMainContext.js?t=wechat&s=1711929485293&v=3.3.5:1)
    at Function.thirdErrorReport (WAServiceMainContext.js?t=wechat&s=1711929485293&v=3.3.5:1)
    at Object.thirdErrorReport (WAServiceMainContext.js?t=wechat&s=1711929485293&v=3.3.5:1)
    at i (WASubContext.js?t=wechat&s=1711929485293&v=3.3.5:1)
    at Object.cb (WASubContext.js?t=wechat&s=1711929485293&v=3.3.5:1)
    at q._privEmit (WASubContext.js?t=wechat&s=1711929485293&v=3.3.5:1)
    at q.emit (WASubContext.js?t=wechat&s=1711929485293&v=3.3.5:1)
    at WASubContext.js?t=wechat&s=1711929485293&v=3.3.5:1
    at n (WASubContext.js?t=wechat&s=1711929485293&v=3.3.5:1)
    at je (WASubContext.js?t=wechat&s=1711929485293&v=3.3.5:1)(env: macOS,mp,1.06.2306020; lib: 3.3.5)

环境信息

Taro v3.6.25

  Taro CLI 3.6.25 environment info:
    System:
      OS: macOS 10.15.7
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 16.20.2 - ~/.nvm/versions/node/v16.20.2/bin/node
      npm: 8.19.4 - ~/.nvm/versions/node/v16.20.2/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.25 => 3.6.25 
      @tarojs/components: 3.6.25 => 3.6.25 
      @tarojs/helper: 3.6.25 => 3.6.25 
      @tarojs/plugin-framework-vue3: 3.6.25 => 3.6.25 
      @tarojs/plugin-html: 3.6.25 => 3.6.25 
      @tarojs/plugin-platform-alipay: 3.6.25 => 3.6.25 
      @tarojs/plugin-platform-h5: 3.6.25 => 3.6.25 
      @tarojs/plugin-platform-jd: 3.6.25 => 3.6.25 
      @tarojs/plugin-platform-qq: 3.6.25 => 3.6.25 
      @tarojs/plugin-platform-swan: 3.6.25 => 3.6.25 
      @tarojs/plugin-platform-tt: 3.6.25 => 3.6.25 
      @tarojs/plugin-platform-weapp: 3.6.25 => 3.6.25 
      @tarojs/runtime: 3.6.25 => 3.6.25 
      @tarojs/shared: 3.6.25 => 3.6.25 
      @tarojs/taro: 3.6.25 => 3.6.25 
      @tarojs/taro-loader: 3.6.25 => 3.6.25 
      @tarojs/webpack5-runner: 3.6.25 => 3.6.25 
      babel-preset-taro: 3.6.25 => 3.6.25 
      eslint-config-taro: 3.6.25 => 3.6.25