Реакция сброса входного состояния и проблемы с символом пространства в компоненте динамического контрольного списка ⇐ Javascript

[Anonymous]

Я работаю над компонентом React для управления контрольным списком подготовки, в котором пользователи могут добавлять, удалять и сохранять элементы. Функциональность по большей части работает так, как задумано, но я столкнулся с двумя проблемами:
Сброс состояния поля ввода:
При добавлении нового контрольного списка. item поле ввода (newField) иногда неожиданно сбрасывается, вероятно, из-за повторной визуализации компонента.
Это происходит, когда я обновляю состояние элемента, вызывая повторную визуализацию всего компонента.
Проблема с пробелами:
Пробелы в начале или конце ввода обрабатываются неправильно.
Вот фрагмент кода:

Код: Выделить всё

"use client";

import { useState, useTransition } from "react";

import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import { LoaderSpinner } from "@/components/loader-spinner";
import { Input } from "@/components/ui/input";
import { ScrollArea } from "@/components/ui/scroll-area";
import { delay } from "@/lib/utils";
import { XIcon, Check, CircleMinus } from "lucide-react";
import { prepCheckList } from "@/lib/utils";
import { useRouter } from "next/navigation";

export function PreparationChecklist({
isChecklistOpen,
setIsChecklistOpen,
entityId,
data,
}) {
const [isPending, startTransition] = useTransition();

const [isOpen, setIsOpen] = useState(false);
const [items, setItems] = useState(
data?.length > 0
? data
: [
{
label: "label 1",
checked: false,
isNew: false,
},
{
label: "label 2",
checked: false,
isNew: false,
},
{
label: "label 3",
checked: false,
isNew: false,
},
{ label: "label 4", checked: false, isNew: false },
{
label: "label 5",
checked: false,
isNew: false,
},
{
label: " label 6",
checked: false,
isNew: false,
},
],
);
const [newField, setNewField] = useState("");
const [isSaving, setIsSaving] = useState(false);
const [isAdding, setIsAdding] = useState(false);

const route = useRouter();

const handleCheckedChange = (index, checked) => {
setItems((prevItems) => {
const updatedItems = [...prevItems];
updatedItems[index].checked = checked;
return updatedItems;
});
};

const handleSave = async () => {
setIsSaving(true);
const response = await prepCheckList(entityId, items);
console.log("response: >>>>>>>>>", response);

await delay(1000); // Simulate API call
startTransition(() => {
route.refresh();
setIsSaving(false);
});
};

const handleAddMoreClick = () => {
if (isAdding) {
if (newField) {
// Add new item if input is not empty
setItems((prevItems) => [
...prevItems,
{ label: newField, checked: false, isNew: true },
]);
setNewField(""); // Reset the input field
setIsAdding(false); // Hide the input field
} else {
// Hide input field if clicked again with no input
setIsAdding(false);
}
} else {
// Show input field
setIsAdding(true);
}
};
const handleDeleteField = (index) => {
// Only allow deleting items with `isNew: true`
setItems((prevItems) =>
prevItems.filter((_, i) => !(i === index && prevItems[i].isNew)),
);
};
return (

 setIsChecklistOpen(!isChecklistOpen)}
>



Checklist




{items.map((item, index) =>  (


handleCheckedChange(index, checked)
}
className="h-4 w-4"
/>

{item.label}


{item.isNew && (
 handleDeleteField(index)}
>


)}


))}



{isAdding && (
 setNewField(e.target.value)}
placeholder="Add new checklist item"
className="flex-1"
/>
)}

{isAdding ? (
newField ? (

) : (

)
) : (
"Add More"
)}


{isSaving || isPending ? (

) : (
"Save changes"
)}






);
}

Что я пробовал:

• Устранение дребезга ввода: я пробовал устранение дребезга обработчика ввода, но поле по-прежнему сбрасывается во время повторного рендеринга.
• Отдельное управление состоянием: я переместил состояние newField за пределы
  компонента, но это не решило проблему проблема.

Ожидаемое поведение:
Поле ввода должно сохранять свое значение, даже если компонент выполняет повторную визуализацию при обновлении состояния элементов.
Пользователи должны иметь возможность вводить пробелы (в начале, в конце или между ними) без ограничений.
Вопросы:

• Как запретить поле ввода (newField) от сброса во время
  повторной отрисовки?
• Как лучше всего обрабатывать пробелы в поле ввода,
  гарантируя чистую проверку?

Будем очень признательны за любые советы или альтернативные подходы! Спасибо.

Подробнее здесь: https://stackoverflow.com/questions/793 ... -component