ок

По нажатию кнопки в родителе

он должен переписать поле с картинками, записать туда те которые остались (из дочки) и те которые новые (приходят с сервера хоста картинок)

т.е. свойства прилетают в стейт родителя а по сабмиту летят на сервак?

т.е. свойства прилетают в стейт родителя а по сабмиту летят на сервак?

По сабмиту эти стейты должны записаться в основной стейт родителя productValue, после чего весь этот productValue должен улететь на бек в качестве тела запроса

Просто когда я пишу setState - и тут же пытаюсь его вызвать - возвращается старое значение.

Что логично, так реакт работает

дочерний работает по onChange - сразу же присылает все изменения родителю

вот эти изменения где хранишь?

Просто когда я пишу setState - и тут же пытаюсь его вызвать - возвращается старое значение.

на самом деле нет, просто это асинхронщина

вот эти изменения где хранишь?

В стейте родителя. Они автоматом всегда актуализируются из дочки

один момент я не пойму

1 ты говоришь что дочерний сразу меняет стейт родителя

да, временный.

2 По сабмиту эти стейты должны записаться в основной стейт

Который потом нужно записать родителю в другой стейт в качестве поля

да, временный.

это мне кажется кастыль уже

мне кажется ты перемудрил с архитектурой решения

зачем тебе временный стейт?

это мне кажется кастыль уже

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

Гайз привет! Хочу оставить комментарий на 1 видео в пути самурая, а не даёт, пишет JSON.parse: unexpected end of data at line 1 column 5719 of the JSON data Что за ... ???

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

а дочерний компонент точно нужен?

а дочерний компонент точно нужен?

Родитель и так уже 300 строк

а понял

Проблема только в одном. Как записать стейт и его же в актуальном варианте отправить на бек

я понимаю, просто в момент обновления стейта ты уже знаешь каким он будет

Раньше юзЕффект спасал всю ситуацию, но в данном случае не канает

осталось выяснить в каком месте это реализовать

вот я и не понял какой метод у тебя ключевой

походу это сабмит

осталось выяснить в каком месте это реализовать

Да, юзеффект - легкое решение, но в данном случае у productValue - очень много динамических свойств, которые меняются при вводе в инпуты

походу это сабмит

да

Да, юзеффект - легкое решение, но в данном случае у productValue - очень много динамических свойств, которые меняются при вводе в инпуты

да будет тригерить лишний раз

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

а где у тебя отсылка на бэк?

Пока нету, я только консоль логами смотрю че имею на данный момент

а

Вот отправка картинок на сервер, возврат ссылок и запись в стейт - отрабатывает моментально

if (addedImgFiles.length !== 0) { const uploadResult = UploadApiAxios(addedImgFiles); await axios .all(uploadResult).then(response => { console.log("inside: ", response); const newUrls = productValue.imageUrls; response.forEach(item => { newUrls.push(item.data.url); }); setProductValue({...productValue, imageUrls: newUrls}) }) .catch(error => { console.log(error); }); }

потому что async await

а полный код фунции?

onst submitHandler = async () => { if (deletedImgUrls.length !== 0) { setProductValue({...productValue, imageUrls: remainingImgUrls}); } if (addedImgFiles.length !== 0) { const uploadResult = UploadApiAxios(addedImgFiles); await axios .all(uploadResult).then(response => { const newUrls = productValue.imageUrls; response.forEach(item => { newUrls.push(item.data.url); }); setProductValue({...productValue, imageUrls: newUrls}) }) .catch(error => { console.log(error); }); } console.log("Images: ", remainingImgUrls); console.log("Deleted urls: ", deletedImgUrls); console.log("Added Files:", addedImgFiles); console.log("Updated Product: ", productValue); onClose(); };

console.log("Updated Product: ", productValue); - включает в себя изменения из запроса

А это if (deletedImgUrls.length !== 0) { setProductValue({...productValue, imageUrls: remainingImgUrls}); } ——- нет, специфика реакта

Вместо консоль логов будет отправка стейта на бек

ок ща вникну

Убрал лишнего, чтоб не мешалось

вот тут я так понял отсылка картинок на сервер и получение их новых url ? await axios .all(uploadResult).then(response => { console.log("inside: ", response);

Да, это вызов промиса

console.log("Images: ", remainingImgUrls); console.log("Deleted urls: ", deletedImgUrls); console.log("Added Files:", addedImgFiles); console.log("Updated Product: ", productValue); а потом после этого ты хочешь еще отправить эти поля на сервер?

Отправка в другом месте, но эта штука работает и стейт записывает, если вызвать консоль лог то стейт будет правильным

console.log("Images: ", remainingImgUrls); console.log("Deleted urls: ", deletedImgUrls); console.log("Added Files:", addedImgFiles); console.log("Updated Product: ", productValue); а потом после этого ты хочешь еще отправить эти поля на сервер?

только productValue

Остальные консоль логи - это чтоб смотреть что прилетает все правильно и актуально

ясно

Еще буду делать запрос на сервер картинок чтоб удалить - удаленные, но это уже дело техники, там ничего сложного

if (deletedImgUrls.length !== 0) { setProductValue({...productValue, imageUrls: remainingImgUrls}); } то есть у тебя это не успевает отработать

Еще буду делать запрос на сервер картинок чтоб удалить - удаленные, но это уже дело техники, там ничего сложного

вот это мне кажется совсем лишнее

if (deletedImgUrls.length !== 0) { setProductValue({...productValue, imageUrls: remainingImgUrls}); } то есть у тебя это не успевает отработать

Он то отрабатывает, но возвращает старое значение т.к. небыло перерендера

по логике тебе нужно так 1) получить что-то с сервера 2) сделать на фронте изменения 3) отослать изменения 4) на сервере сделать все что нужно удалить / добавить

вот это мне кажется совсем лишнее

ну, тут как бы сотни товаров, сотни картинок, если они не нужны то чтоб их не хранить на севрере - принято решение удалять. Но то к делу не относится.

каждый раз слать по отдельности не лучший вариант хотя зависит от специфики

каждый раз слать по отдельности не лучший вариант хотя зависит от специфики

сервера разные

ну, тут как бы сотни товаров, сотни картинок, если они не нужны то чтоб их не хранить на севрере - принято решение удалять. Но то к делу не относится.

бэк может это подчистить без фронта

картинки - один сервер, а все описание и ссылки - в монго

у бэка есть база картинок и файлы

картинки - один сервер, а все описание и ссылки - в монго

ну и что бэк же имеет к ним доступ и к базе и к картинкам?

у бэка есть база картинок и файлы

у бека есть только база с товарами со всеми занчениями и ссылками на картинки, сами картинки лежать на 3rd party

ну и что бэк же имеет к ним доступ и к базе и к картинкам?

нет )

ну хорошо но ты же не фронтом картинки удаляешь? или фронтом?

я имею физически

Картинки на cloudinary, работа с добавлением туда файлов - работает через фронт )

а с удалением?

Удаление потом прикрутим, тут проблем не будет. Надеюсь (наш "специалист" осилил только такой вариант) :)

Картинки на cloudinary, работа с добавлением туда файлов - работает через фронт )

А как бек тогда знает что картинка была зааплоаджена на сервер?

А как бек тогда знает что картинка была зааплоаджена на сервер?

Бек в БД хранит массив ссылок на картинки

я про что вообще т.е. есть у тебя товары в монго и там ардреса картинки, ты обновил товар прислал данные, сервер перед тем как записать что-то в монго сравнил не нужно ли удалить картинки которых больше нет удалил и записал новые данные в базу не нужен еще один запрос

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

я про что вообще т.е. есть у тебя товары в монго и там ардреса картинки, ты обновил товар прислал данные, сервер перед тем как записать что-то в монго сравнил не нужно ли удалить картинки которых больше нет удалил и записал новые данные в базу не нужен еще один запрос

бек не имеет доступа к серверу с картинками.

он получает ссылки и все

следить за базой должен бэк и за удалением всякого

следить за базой должен бэк и за удалением всякого

верю, но человек который это пилил - сделал через фронт.