Неожиданная потеря состояния при динамическом добавлении/удалении вложенных крючков ⇐ Javascript

[Anonymous]

Проблема < /h1>
Я пытаюсь создать динамический анкетный компонент в React, где пользователи могут добавлять и удалять разделы вопросов. Каждый раздел управляет своим собственным локальным состоянием, используя крючки (например, usestate или userEducer), и я храню каждый раздел в массиве компонентов React.

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

function QuestionSection({ id }) {
const [answer, setAnswer] = useState("");
return (

Question {id + 1}
Current answer: "{answer}"
 setAnswer(e.target.value)}
/>

);
}
< /code>
и родительский компонент, который управляет списком: < /p>
function Questionnaire() {
const [sections, setSections] = useState([0]); // array of section ids
const add = () => setSections(prev => [...prev, prev.length]);
const remove = () => setSections(prev => prev.slice(0, -1));

return (

Add Section
Remove Section
{sections.map(id => (

))}

);
}

ожидаемое поведение: только удаленный раздел должен сбросить; Другие разделы должны хранить свои введенные данные.
Фактическое поведение: Когда я удаляю раздел (особенно из середины), другие разделы теряют свое состояние и сброс до пусты /> Пробовал использование UUID для идентификаторов вместо последовательных чисел - та же проблема < /li>
Обернутые вопросы в react.memo () и добавленные журналы отладки - состояние все еще сбрасывает < /li>
< /ul>
Клавики кажутся стабильными в моей регистрации, но React все еще решает состояние крючка. Что мне не хватает в том, как реагирует выверка с динамическими списками?
Должен ли я поднимать состояние вместо этого? Есть рекомендуемые закономерности?

Подробнее здесь: https://stackoverflow.com/questions/796 ... sted-hooks