Réorganiser le tableau dans l'état

Question

J'utilise zustand pour créer un état global avec un tableau d'éléments à faire, et j'ai des fonctionnalités pour ajouter, supprimer et basculer entre l'achèvement/l'annulation pour chaque élément à faire.

J'ai également utilisé Dnd Kit pour glisser-déposer chaque composant ToDo et les réorganiser dans le contexte global, pour lequel je devais créer une fonction reorderTodo dans le magasin zustand de cette façon :

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

Cela m'a donné une grosse erreur de frappe dans 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<...>'.

Mais le problème survient lorsque je peux créer l'application en utilisant yarn dev 在开发模式下运行应用程序，当我想使用 yarn build cela me donne cette erreur dans la console et donc je ne peux pas déployer l'application dans Netlify/vercel

Comment créer une fonction de réorganisation pour corriger cette erreur ?

Answer 1

Le problème est que la méthode set doit renvoyer l'état et votre code renvoie undefined：if (!todo) return;。在这一行中，您可以将代码更改为 if (!todo) return { todos };

dans setState