相关平台
微信小程序
复现仓库
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
2条答案
按热度按时间gxwragnw1#
我试过将组件换成List,则不会有这个问题。
同时,如果我将state.defaultList换成静态的集合,也不会有问题
f45qwnt82#
确实 我也遇到了类似的问题,期待解决。