Susun semula tatasusunan dalam keadaan

Question

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?

Answer 1

Masalahnya ialah kaedah yang ditetapkan perlu mengembalikan keadaan, dan kod anda kembali undefined：if (!todo) return;。在这一行中，您可以将代码更改为 if (!todo) return { todos };

dalam setState