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

Question

我有如下的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

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

Answer 1

我不会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))