我使用zustand创建一个全局状态的ToDos数组,我有功能添加,删除和切换完成/撤消每个todo。
我还使用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中部署应用程序
如何创建重新排序函数来修复此错误?
1条答案
按热度按时间fnvucqvd1#
问题是set方法需要返回state,而你的代码在setState中返回
undefined
:if (!todo) return;
。在这一行你可以把代码改为if (!todo) return { todos };