Телеграмм чат группы react

Приветствую.
Как промапать такое в таблицу?

{
  "item name": [
    {
      "name": "a string",
      "c": 158,
      "p": 1,
      "t": 1
    },
    {
      "name": "a string",
      "c": 158,
      "p": 1,
      "t": 1
    },
    ... ...
  ],
  ... ...
}

Создал массив через Object.entries(), подав туда этот объект.
В <th> нужны все item name, в <td> данные объектов в массиве под item name'ами.

12:06пожаловаться #1

AK

Aliaksandr Kazutsin in React — русскоговорящее сообщество

тогда проблема не тут

Очень странно.. Таким же методом текст загружается и не лагает, а когда картинка то виснет все пока не обнулю..

Vlad in React — русскоговорящее сообщество

12:07пожаловаться #2

V

Aliaksandr Kazutsin

Очень странно.. Таким же методом текст загружается и не лагает, а когда картинка то виснет все пока не обнулю..

посмотри через perfomance в девтулзах что грузит
и сюда кинь скрин

12:07пожаловаться #3

С

Санжар in React — русскоговорящее сообщество

El Anonimo

Приветствую.
Как промапать такое в таблицу?

{
  "item name": [
    {
      "name": "a string",
      "c": 158,
      "p": 1,
      "t": 1
    },
    {
      "name": "a string",
      "c": 158,
      "p": 1,
      "t": 1
    },
    ... ...
  ],
  ... ...
}

Создал массив через Object.entries(), подав туда этот объект.
В <th> нужны все item name, в <td> данные объектов в массиве под item name'ами.

а в чем проблема ?

12:08пожаловаться #4

С

Санжар in React — русскоговорящее сообщество

El Anonimo

Приветствую.
Как промапать такое в таблицу?

{
  "item name": [
    {
      "name": "a string",
      "c": 158,
      "p": 1,
      "t": 1
    },
    {
      "name": "a string",
      "c": 158,
      "p": 1,
      "t": 1
    },
    ... ...
  ],
  ... ...
}

Создал массив через Object.entries(), подав туда этот объект.
В <th> нужны все item name, в <td> данные объектов в массиве под item name'ами.

obj["item name"].map(item => <th key={item.name}>{item.name}</th>)

12:10пожаловаться #5

AK

Aliaksandr Kazutsin in React — русскоговорящее сообщество

посмотри через perfomance в девтулзах что грузит
и сюда кинь скрин

Мм а где эта вкладка что-то не вижу!?

Vlad in React — русскоговорящее сообщество

12:10пожаловаться #6

V

Aliaksandr Kazutsin

Мм а где эта вкладка что-то не вижу!?

ну ты серьезно?

12:10пожаловаться #7

EA

ну ты серьезно?

Он может быть на Мозилле, где она может быть выключена.

Амир Хан in React — русскоговорящее сообщество

12:11пожаловаться #8

АХ

Привет. Такая проблема: есть компонент Loading со спиннером,
он вызывается из разных компонентов,
как сделать чтоб анимация(@keyframes) привязанная к className компонента не сбрасывалась?

Вложенность примерно такая:

<Check_1>
    <Check_2>
        <Check_3>
            <Route />
        </Check_3>
    </Check_2>
</Check_1>

Каждый из компонентов проверяет подгрузились ли данные для его работы,
если да - рендерить children, если нет - рендерить <Loading />;

При первой загрузке страницы и до подгрузки всех данных разметка выглядит так:

...
<div id='root'>
    <div class='page'>
        <div class='loading'></div>
    </div>
</div>
...

12:11пожаловаться #9

EA

Aliaksandr Kazutsin

Мм а где эта вкладка что-то не вижу!?

В Мозилле в консоли справа 3 точки, settings, галка performance.

12:12пожаловаться #10

EA

Санжар

obj["item name"].map(item => <th key={item.name}>{item.name}</th>)

Приведённый объект превращён в Массив через Object.entries. Дальнейшее описано в https://t.me/react_js/1022631.

12:14пожаловаться #11

EA

Песочницу сделать?

Vlad in React — русскоговорящее сообщество

12:15пожаловаться #12

V

Амир Хан

Привет. Такая проблема: есть компонент Loading со спиннером,
он вызывается из разных компонентов,
как сделать чтоб анимация(@keyframes) привязанная к className компонента не сбрасывалась?

Вложенность примерно такая:

<Check_1>
    <Check_2>
        <Check_3>
            <Route />
        </Check_3>
    </Check_2>
</Check_1>

Каждый из компонентов проверяет подгрузились ли данные для его работы,
если да - рендерить children, если нет - рендерить <Loading />;

При первой загрузке страницы и до подгрузки всех данных разметка выглядит так:

...
<div id='root'>
    <div class='page'>
        <div class='loading'></div>
    </div>
</div>
...

animation-iteration-count: infinite
если правильно понял

export default - зло... in React — русскоговорящее сообщество

12:15пожаловаться #13

ei

Alexey Elizarov

https://codesandbox.io/s/react-playground-forked-o87j4?file=/index.js

Смотрим в консоль справа снизу.
Нажимаем Rerender.
Проверяем same или not same

CodeSandbox

React PlayGround (forked) - CodeSandbox

React PlayGround (forked) by beautyfree using react, react-dom

и к чему это?

Амир Хан in React — русскоговорящее сообщество

12:16пожаловаться #14

АХ

animation-iteration-count: infinite
если правильно понял

Не правильно понял.

В реакте идет анмаунт и маунт одно и того же компонента, разметка остается такой же, а вот анимация сбрасывается и начинается заново.

12:16пожаловаться #15

AK

Aliaksandr Kazutsin in React — русскоговорящее сообщество

El Anonimo

Он может быть на Мозилле, где она может быть выключена.

Пасиб друг так и было)