在狀態中重新排序數組
我使用 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 中
如何建立重新排序函數來修復此錯誤？
