zustand的store的方法,为何第二次点击报错:Unhandled Runtime Error TypeError: addTab is not a function?
我有如下的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个回答
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))
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容