Использование счетчика в качестве идентификатора внуков в React ⇐ Javascript

[Anonymous]

У меня есть несколько дочерних форм, и все формы отправляются одновременно, нажав кнопку «Отправить», доступную в родительском элементе.
Чтобы добиться этого, нам нужно иметь состояние, называемое формами. в родителе, который представляет собой массив объектов. Каждому объекту соответствует одна форма. Кроме того, для onChange каждой формы нам необходимо передать данные родительскому элементу.
Проблема, с которой я сталкиваюсь, заключается в том, что при изменении данных в каждой форме я хочу проверить, соответствует ли это форма уже существует, и обновите ее, а не добавляйте новую в массив. Для этого нам нужен идентификатор каждой формы, который должен передаваться вместе с объектом.
Я понял, что можно использовать счетчик в родителе. Этот счетчик будет увеличиваться для каждого внука, который у нас есть на экране, и мы можем сохранить этот счетчик перед увеличением его в качестве идентификатора. Таким образом, каждая форма будет иметь уникальный идентификатор, например: 0, 1, 2, 3 и т. д., в зависимости от того, какая из них отображается первой.
Часть моего кода:
Часть моего кода:
Родительский компонент:

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

function Parent({
userDetails,
availableViewTypes,
availableDiscountReason,
}) {
const [views, setViews] = useState([]);
const [counter, setCounter] = useState(0);

const getNextCounter = () => {
const currentCounter = counter;
setCounter(counter + 1);
return currentCounter;
};

const handleViewChange = (index, updatedView) => {
console.log(index);
setViews((prev) => {
const newViews = [...prev];
newViews[index] = updatedView; // Update the specific view by index
return newViews;
});
};

const handleSubmit = () => {
console.log(views)
};
return (


{userDetails.data.length > 0 &&
userDetails.data.map((p, i) => {
return (


{p.data.map((payment, index) => (

))}


);
})}




Submit



);
}

export default Parent;

Детский компонент:

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

function Child({
data,
types,
onViewChange,
getNextCounter,
}) {
return (

{types?.length > 0 &&
types.map((v, i) => (

)
)}

);
}

export default Child;

GrandChild:

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

function GrandChild({ onViewChange, counter, getNextCounter }) {

const [formIdentifier, setFormIdentifier] = useState(null);
const [viewData, setViewData] = useState({
quantity: 0,
amount: 0,
identifier: null,
});

const updateViewData = (updates) => {
setViewData((prev) => {
const updatedData = { ...prev, ...updates };
onViewChange(formIdentifier, updatedData);
return updatedData;
});
};
useEffect(() => {
const newIdentifier = getNextCounter();
setFormIdentifier(newIdentifier);
setViewData((prev) => {
const updatedData = { ...prev, identifier: newIdentifier };
return updatedData;
});
});

reutrn (
// rest of the code
)

Если я передам функцию getNextCounter в зависимостях, это вызовет бесконечный цикл. Если я не передам его, счетчик увеличится только один раз, поэтому все формы будут иметь один и тот же идентификатор (который будет равен 1), а это абсолютно неправильно.
Не могли бы вы сказать? мне, как это сделать правильно?

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