国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Ich verwende zustand, um einen globalen Status mit einer Reihe von Aufgabenelementen zu erstellen, und ich habe Funktionen zum Hinzufügen, Entfernen und Umschalten zwischen Abschluss und Rückg?ngigmachen für jedes Aufgabenelement.

Ich habe auch Dnd Kit verwendet, um jede ToDo-Komponente per Drag-and-Drop zu verschieben und sie im globalen Kontext neu anzuordnen. Dafür musste ich eine reorderTodo-Funktion im Zustandsspeicher auf diese Weise erstellen:

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 };
        }),
}));

Es gab einen gro?en Tippfehler in 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<...>'.

Aber das Problem tritt auf, wenn ich die App mit yarn dev 在開(kāi)發(fā)模式下運(yùn)行應(yīng)用程序，當(dāng)我想使用 yarn build erstellen kann. In der Konsole wird dieser Fehler angezeigt und ich kann die App daher nicht in Netlify/Vercel bereitstellen

Wie erstelle ich eine Neuordnungsfunktion, um diesen Fehler zu beheben?