Как динамически создавать массивы в state?

Question

[deantek]

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

мой вариант https://codesandbox.io/embed/trusting-cdn-oqt6l?fo...

Comments

[WbICHA]

Зачем ты перед каждым вызовом map делаешь проверку на длину массива?
Почему ты вместо форыча используешь мап?
По какой причине ты мутируешь массивы в компоненте? И вообще по какой причине ты их трогаешь, когда это не стейты?
И последнее, но самое вкусное:

const array = [];
    Object.values(filesContract).map((file) => {
      array.push(file);
    });
    return array;

Ты, блин, серьёзно?

[deantek]

WbICHA, потому что не знаю как делать "как надо"

[WbICHA]

А почему в одном файле ты используешь опшинал чейнинг, а в остальных нет?
Впрочем, там, где ты его используешь (как и 90% твоих проверок), это бессмысленная загрузка цпу.

[WbICHA]

deantek, может тогда стоит для начала с самим языком разобраться, а потом уже на фреймворки переходить?

[deantek]

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

[WbICHA]

deantek, ок. Надо всё переписывать. Быстрее это сделать с нуля. Как минимум непонятно зачем тебе общий стейт.

[deantek]

WbICHA, общий стейт, чтобы я отправил беку все файлы в одном массиве, а на длину массива проверял, потому что в некоторых полях с бека они могут не прийти

Answer 1

[ikutin666]

тяжело читать в санбоксе там можно создать вроде проект react и он будет красиво все подсвечивать

идея заключается вот в чем
state должен быть что то в этом роде

state={
"1":{} //первый файл,
"2":{} //второй файл 
};
//изменение 2 файла
setState({...state,2:{}})
//добавление 3 файла
setState({...state,3:{}})

следовательно при отрисовки "add file" берется нужный файл

надеюсь идея понятна