Susun semula tatasusunan dalam keadaan
Saya menggunakan zustand untuk mencipta keadaan global dengan pelbagai item tugasan dan saya mempunyai fungsi untuk menambah, mengalih keluar dan menogol penyelesaian/buat asal bagi setiap item tugasan.
Saya juga menggunakan Dnd Kit untuk menyeret dan melepaskan setiap komponen Tugasan dan menyusunnya semula dalam konteks global, yang mana saya perlu mencipta fungsi reorderTodo dalam kedai zustand dengan cara ini:
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 };
}),
}));
Ia memberi saya ralat skrip taip yang besar dalam 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<...>'.
Tetapi masalahnya datang apabila saya boleh membina apl menggunakan yarn dev 在开发模式下运行应用程序，当我想使用 yarn build ia memberikan saya ralat ini dalam konsol dan oleh itu saya tidak boleh menggunakan aplikasi dalam Netlify/vercel
Bagaimana untuk mencipta fungsi penyusunan semula untuk membetulkan ralat ini?
