我使用 zustand 建立一個帶有待辦事項陣列的全域狀態,我有新增、刪除和切換每個待辦事項完成/撤銷的功能。
我還使用 Dnd Kit 拖放每個 ToDo 元件並在全域上下文中對它們重新排序,為此我需要以這種方式在 zustand 儲存中建立一個 reorderTodo 函數:
const handleDragEnd = (event: any) => { const { active, over } = event; if (active.id !== over.id) { const newIndex = filteredTodos.findIndex( (todo) => todo.id === over.id ); setFilteredTodos((filteredTodos) => { const oldIndex = filteredTodos.findIndex( (todo) => todo.id === active.id ); return arrayMove(filteredTodos, oldIndex, newIndex); }); reorderTodo(active.id, newIndex); } }; import { create } from "zustand"; export const useTodosStore = create(() => ({ todos: [ { id: 1, text: "Learn TypeScript", done: true }, { id: 2, text: "Try immer", done: false }, { id: 3, text: "Tweet about it", done: false }, ], addTodo: (text: string, done: boolean) => { useTodosStore.setState((state) => ({ todos: [ ...state.todos, { id: state.todos.length + 1, text, done: done }, ], })); }, toggleTodo: (id: number) => useTodosStore.setState((state) => ({ todos: state.todos.map((todo) => todo.id === id ? { ...todo, done: !todo.done } : todo ), })), removeTodo: (id: number) => useTodosStore.setState((state) => ({ todos: state.todos.filter((todo) => todo.id !== id), })), reorderTodo: (id: number, position: number) => useTodosStore.setState((state) => { const todos = [...state.todos]; const todo = todos.find((todo) => todo.id === id); if (!todo) return; const idx = todos.indexOf(todo); todos.splice(idx, 1); todos.splice(position, 0, todo); return { todos }; }), }));
它在 VSCode 中給了我一個大的打字稿錯誤:
Argument of type '(state: { todos: { id: number; text: string; done: boolean; }[]; addTodo: (text: string, done: boolean) => void; toggleTodo: (id: number) => void; removeTodo: (id: number) => void; reorderTodo: (id: number, position: number) => void; }) => { ...; } | undefined' is not assignable to parameter of type '{ todos: { id: number; text: string; done: boolean; }[]; addTodo: (text: string, done: boolean) => void; toggleTodo: (id: number) => void; removeTodo: (id: number) => void; reorderTodo: (id: number, position: number) => void; } | Partial<...> | ((state: { ...; }) => { ...; } | Partial<...>)'. Type '(state: { todos: { id: number; text: string; done: boolean; }[]; addTodo: (text: string, done: boolean) => void; toggleTodo: (id: number) => void; removeTodo: (id: number) => void; reorderTodo: (id: number, position: number) => void; }) => { ...; } | undefined' is not assignable to type '(state: { todos: { id: number; text: string; done: boolean; }[]; addTodo: (text: string, done: boolean) => void; toggleTodo: (id: number) => void; removeTodo: (id: number) => void; reorderTodo: (id: number, position: number) => void; }) => { ...; } | Partial<...>'.
但是我可以使用yarn dev
在開發模式下運行應用程序,當我想使用yarn build
建立應用程式時,問題就出現了,它在控制台中給了我這個錯誤,因此我也無法部署該應用程式在Netlify/vercel 中
如何建立重新排序函數來修復此錯誤?
問題是 set 方法需要傳回狀態,而您的程式碼在 setState 中傳回
#undefined
:if (!todo) return;
。在這一行中,您可以將程式碼變更為if (!todo) return { todos };