typescript 在zustand中重新排序数组

nbysray5  于 2023-06-07  发布在  TypeScript
关注(0)|答案(1)|浏览(419)

我使用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中部署应用程序
如何创建重新排序函数来修复此错误?

fnvucqvd

fnvucqvd1#

问题是set方法需要返回state,而你的代码在setState中返回undefinedif (!todo) return;。在这一行你可以把代码改为if (!todo) return { todos };

相关问题