Susun semula tatasusunan dalam keadaan
P粉741678385
P粉741678385 2024-03-30 14:44:42
0
1
300

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?

P粉741678385
P粉741678385

membalas semua(1)
P粉432930081

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

dalam setState
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!