Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug Report] DropdownMenu 下拉菜单给options属性赋值时采用调用方法的形式时,控制台报警告Uncaught (in promise) Maximum recursive updates exceeded in component <van-dropdown-menu>. 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. #12872

Closed
yyrjlw opened this issue May 16, 2024 · 0 comments

Comments

@yyrjlw
Copy link

yyrjlw commented May 16, 2024

重现链接

https://codesandbox.io/p/devbox/vant-4-issue-template-forked-rxpwxw?workspaceId=aa42d40f-669f-4d9d-a4cf-42da084f6b45&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clw8nm53p00073j6ivwebfrxq%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clw8nm53o00023j6i5zeo1dg1%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clw8nm53o00043j6ij6edg176%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clw8nm53o00063j6izrgtqfzt%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clw8nm53o00023j6i5zeo1dg1%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clw8nm53o00013j6i0r0jstmq%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.js%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clw8nmsd600363j6iozw11hw9%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252FApp.vue%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clw8nm53o00023j6i5zeo1dg1%2522%252C%2522activeTabId%2522%253A%2522clw8nmsd600363j6iozw11hw9%2522%257D%252C%2522clw8nm53o00063j6izrgtqfzt%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clw8nm53o00053j6iyxzcf7uy%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A8080%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clw8nm53o00063j6izrgtqfzt%2522%252C%2522activeTabId%2522%253A%2522clw8nm53o00053j6iyxzcf7uy%2522%257D%252C%2522clw8nm53o00043j6ij6edg176%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clw8nm53o00033j6it3h31dpz%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%257D%255D%252C%2522id%2522%253A%2522clw8nm53o00043j6ij6edg176%2522%252C%2522activeTabId%2522%253A%2522clw8nm53o00033j6it3h31dpz%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Vant 版本

4.9.0

描述一下你遇到的问题。

<template>
  <div id="app">
    <van-dropdown-menu>
      <van-dropdown-item :options="option1()" />
    </van-dropdown-menu>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    option1: () => {
      console.log("被调用");
      return [
        { text: "全部商品", value: 0 },
        { text: "新款商品", value: 1 },
        { text: "活动商品", value: 2 },
      ];
    },
  },
};
</script>

如代码所示,当使用调用方法的形式给options赋值时,控制台会报错:

Uncaught (in promise) Maximum recursive updates exceeded in component . 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.

,并且option1方法会被调用很多次

重现步骤

详情见重现链接

设备/浏览器

No response

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant