zustand的store的方法,为何第二次点击报错:Unhandled Runtime Error TypeError: addTab is not a function?

作者站长头像
站长
· 阅读数 5

我有如下的zustand的store:

// tabs.store.ts
interface TabsSlice {
  tabs: [],
  addTab: (tab: TabsWithBreadcrumbs[number]) => {},
  removeTab: (key: string) => {},
}

export const createTabsSlice = (set:any, get:any): TabsSlice => ({

  tabs: [
   { title: '简介', breadcrumbs: ['简介'], key: '000' },
  ],

  addTab: (tab) => {

    console.log('mmkk2: ', tab)

    return set((state) => {
      const newTabs = state.tabs.push(tab)

      return newTabs
    })
  },

  removeTab: (key: string) => {
    return set((state) => {
      const newTabs = state.tabs.filter(tab => tab.key !== key)
      return newTabs
    })
  }
})

使用时候:

const { tabs, addTab, removeTab } = useStore();
...
<span 
  onClick={() => {
    const tab = { 
      ...
    }

    addTab(tab)  // 点击的时候,第一次可以,但是第二次就报错
  }

在点击span的时候,第一次都是正常的,第二次就报错:

Unhandled Runtime Error
TypeError: addTab is not a function

请问这个是怎么回事呢,第一次点击的时候都是可以正常点击的,为何第二次就报错?

回复
1个回答
avatar
test
2024-06-26

我不会zustand;我只看 js

return set((state) => {
   const newTabs = state.tabs.push(tab) // push 的返回值是 state.tabs.length
   return newTabs  // number
 })

这样改吧

return set((state) => state.tabs.concat(tab))
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容