Массив в рендере(неужели всегда надо перерисовывать?)

@Gvizl · Регистрация: 31.01.2014

Студворк — интернет-сервис помощи студентам

Понимаю, малось стрёмный вопрос, просто я сейчас делаю такую штуку, в которой по сути есть таблица, у которой всегда должно быть одинаковое количество tr, но в зависимости от ряда приходящих в json параметров текста в столбцах(и видимость их div у текстов) должна меняться.

Формирование массива на приёмке post выглядит так

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
            //console.log(  this.managers);
            if (data) {
 
                obj.state.listItems = [];
 
                for (var i = 0; i < countTr ; i++) {
                    group = 0;
                    if ( i < 3 ) group = 1;
                    else
                    if ( i < 11 ) group = 2;
                    else
                        group = 3;
 
                    if( i % 2 ) parity = 1; else parity = 0;
                    
                    item = {
                        'height': this.tdHeight,
                        'leftShift' : this.tdLeftShift,
                        'parity' : parity,
                        'name' : 1,
                        'count_sell_day' : 2,
                        'count_sell_month' : 3,
                        'group' : group,
                        'keyNum' : i
                    };
 
                    obj.state.listItems.push(item);
 
                    if ( group == 1 ) obj.tdArr1.push(item);
                    else
                    if ( group == 2  ) obj.tdArr2.push(item);
                    else
                        obj.tdArr3.push(item);
                };
 
 
               obj.setState({
                   listItems: obj.state.listItems,
                });
 
                //obj.managers = jQuery.parseJSON( data ).managers;
               // console.log(   jQuery.parseJSON( data ).firstLoad );
                //console.log( obj.listItems[0].props  );
                // console.log( obj.listItems[0].props.state.name  );
                //obj.listItems[0].state.name =  obj.managers[0][0].name;
            };

Рендер так

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
                {
                    this.state.listItems.map(item =>
                            (
                                <UserTD
                                    key = {item.keyNum}
                                    height = {item.tdHeight}
                                    leftShift = {item.tdLeftShift}
                                    parity = {item.parity}
                                    name = {1}
                                    count_sell_day = {2}
                                    count_sell_month = {3}
                                    group = {item.group}
                                    keyNum = {item.keyNum} ></UserTD>
                            )
 
                    )
                }

До этого я пробывал забивать массив tr(как компонента) прямо в ф-ции, которая принимает json, но на рендере запись

JavaScript
1
2
3
 {
                    this.state.listItems
               }

Ничего не выводила. Выводила только в случае, если я его формировал в конструкторе.

Хочу уточнить как же всё-таки работает реакт. То бишь он в любом случае рендерит адекватно только через ф-цию map, в которой как раз надо описывать вызов компонента с вводом в него параметров из массива json? А забивать массив компонентами и выводить его в render невозможно?

@froziq · 23.04.2018, 22:50

Добрый вечер.
Не все, что Вы делаете в примере следует применять.
Изменять state можно только через предназначенную для этого функцию setState. Вы же изменяете напрямую:
obj.state.listItems = [];
obj.state.listItems.push(item);

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

@Gvizl · 23.04.2018, 23:59 **[ТС]**

froziq, у меня вопрос по сути по нижнему коду, верхний-то рабочий(ток что массив из аджакса будет).

Добавлено через 1 минуту
Когда я через this.state.listItems.map рендерю компоненты, оно работает. А когда пишу прост
{
this.state.listItems
}

то оно при state не работает.

@froziq · 24.04.2018, 00:08

Попробуйте вывести не <UserTd> <\UserTd>, а вот так <UserTd />

А насчёт моего предыдущего коммента - это лишь рекомендации по коду

И по поводу «Забивать в массив компоненты...» , если я Вас правильно понял, то лучше так не делать, Вы будете выделять память под каждый элемент массива.
Лучше формировать массив данных, как это делаете Вы, а на основе этого массива функцией map рендерить нужные компоненты.

Добавлено через 2 минуты
Не очень понимаю, какого Вы результата хотите в случае
{
this.state.listItems
}

У Вас же в listItems лежит массив, как он по-Вашему должен отрендериться ?

@Gvizl · 24.04.2018, 00:20 **[ТС]**

froziq, ну самое смешное, что он реально рендерился при такой записи, когда в массиве компоненты) Но ток рри первом запуске странички. А потом по state нет. По state рендерит снова ток в том случае, если массив и не из компонентов, а просто данных, а рендер в записи через map с объявлением компонентов.

@froziq · 24.04.2018, 06:15

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

И ещё, Вы говорите, что при первом запуске странички происходит рендер, а потом уже нет. Какие действия Вы совершаете, после которых ожидаете перерендер компонент ?

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@froziq 23 / 16 / 7 Регистрация: 17.10.2012 Сообщений: 74
	23.04.2018, 22:50
	Добрый вечер. Не все, что Вы делаете в примере следует применять. Изменять state можно только через предназначенную для этого функцию setState. Вы же изменяете напрямую: obj.state.listItems = []; obj.state.listItems.push(item); При вызове setState реакт сравнивает предыдущий стейт и новый, если они отличаются, то он вызывает рендер заново (перерисовывает). Когда Вы вызываете setState в Вашем коде, у вас новый state и старый одинаковые, поэтому может не происходить перерендера. 0

@Gvizl 8 / 8 / 2 Регистрация: 31.01.2014 Сообщений: 472
	23.04.2018, 23:59 [ТС]
	froziq, у меня вопрос по сути по нижнему коду, верхний-то рабочий(ток что массив из аджакса будет). Добавлено через 1 минуту Когда я через this.state.listItems.map рендерю компоненты, оно работает. А когда пишу прост { this.state.listItems } то оно при state не работает. 0

@froziq 23 / 16 / 7 Регистрация: 17.10.2012 Сообщений: 74
	24.04.2018, 00:08
	Попробуйте вывести не <UserTd> <\UserTd>, а вот так <UserTd /> А насчёт моего предыдущего коммента - это лишь рекомендации по коду И по поводу «Забивать в массив компоненты...» , если я Вас правильно понял, то лучше так не делать, Вы будете выделять память под каждый элемент массива. Лучше формировать массив данных, как это делаете Вы, а на основе этого массива функцией map рендерить нужные компоненты. Добавлено через 2 минуты Не очень понимаю, какого Вы результата хотите в случае { this.state.listItems } У Вас же в listItems лежит массив, как он по-Вашему должен отрендериться ? 0

@Gvizl 8 / 8 / 2 Регистрация: 31.01.2014 Сообщений: 472
	24.04.2018, 00:20 [ТС]
	froziq, ну самое смешное, что он реально рендерился при такой записи, когда в массиве компоненты) Но ток рри первом запуске странички. А потом по state нет. По state рендерит снова ток в том случае, если массив и не из компонентов, а просто данных, а рендер в записи через map с объявлением компонентов. 0

@froziq 23 / 16 / 7 Регистрация: 17.10.2012 Сообщений: 74
	24.04.2018, 06:15
	Возможно Вам стоит почитать, в каких случаях реакт решает вызвать рендер повторно, а в каких - нет. И ещё, Вы говорите, что при первом запуске странички происходит рендер, а потом уже нет. Какие действия Вы совершаете, после которых ожидаете перерендер компонент ? 0