@react_js
Abu15.07.2018
11:48:50
11:48:50
Help! Запутался в областях видимости :( . Есть компонент класс, куда приходит объект locals через props (точно приходит, видно в девтулзах). Пытаюсь обратиться к его полю в функции render() {return (<h2>{this.props.locals.msc}</h2>)} - выдаёт красный экран. При то, что в том же рендере внизу {this.props.children}. ЧЯДНТ?
Данные в объекте устанавливаются асинхронно?
Spaider15.07.2018
11:49:16
11:49:16
вот в ts такой ошибки бы не возникло! :D
Kendr15.07.2018
11:49:40
11:49:40
Help! Запутался в областях видимости :( . Есть компонент класс, куда приходит объект locals через props (точно приходит, видно в девтулзах). Пытаюсь обратиться к его полю в функции render() {return (<h2>{this.props.locals.msc}</h2>)} - выдаёт красный экран. При то, что в том же рендере внизу {this.props.children}. ЧЯДНТ?
На момент первого рендера мож их нетNaught15.07.2018
11:49:41
11:49:41
Данные в объекте устанавливаются асинхронно?
Он передаётся из родительского компонента, а там получается в результате fetch в componentWillMountюGoogleAbu15.07.2018
11:49:43
11:49:43
Он передаётся из родительского компонента, а там получается в результате fetch в componentWillMountю
Ну вот, делай проверку на наличиеSpaider15.07.2018
11:50:10
11:50:10
разобрались.
Naught15.07.2018
11:50:45
11:50:45
Ну вот, делай проверку на наличие
??? Я именно его в том месте , где на картинке выше подсвечено красным, убираю msc, сразу видит locals, его содержимое, и говорит, что он не валидный ребенок. Как его может не быть?Abu15.07.2018
11:52:51
11:52:51
??? Я именно его в том месте , где на картинке выше подсвечено красным, убираю msc, сразу видит locals, его содержимое, и говорит, что он не валидный ребенок. Как его может не быть?
У тебя данные приходят асинхронно, при первом рендере у тебя там их нет, поэтому undefinedУ тебя данные приходят асинхронно, при первом рендере у тебя там их нет, поэтому undefined
(Но я твой код не видел, прост предположил)Naught15.07.2018
11:53:21
11:53:21
render впервые вызывается после ComponentWillMount?
Naught15.07.2018
11:54:57
11:54:57
У меня в теле данного компонента (не родительского) есть асинхронный вызов Fetch в componentDidMount, и он успевает прийти. Этот вызов судя по всему, делается уровнем выше, и вообще до того, как что-то начинает монтироваться. Если я путаюсь с методами жизненного цикла, поправьте.
Spaider15.07.2018
11:55:19
11:55:19
как он может успеть прийти, перед синхронным рендерем
он в любом случае будет в конце стека
console.log('component will mount')
setTimeout( () => { console.log("data is fetched from server")}, 0)
console.log("render")
Naught15.07.2018
11:56:32
11:56:32
как он может успеть прийти, перед синхронным рендерем
он в любом случае будет в конце стека
Так же как и рендеринг остальных результатов запросов к внешним API?GoogleSpaider15.07.2018
11:56:42
11:56:42
вот запусти этот код в консоли
примерно такое у тебя флоу
по твоему рендер должен вызваться последним
Naught15.07.2018
11:57:01
11:57:01
Боже, у меня нет проблем с асинхронностью.
Spaider15.07.2018
11:57:25
11:57:25
оказывается есть
Spaider15.07.2018
11:59:40
11:59:40
проверяй на то что этот обьект есть, если его нет то показывай лоадер
if (!this.props.locals) {
return (<div>Загрузка...</div>)
} else ...
Ruslan ?15.07.2018
12:02:30
12:02:30
Стивен Лашер на примере реального проекта за 30 минут внедрил Flow, рассказал его основы и исправил найденные баги → https://youtu.be/M1CR0l5xSHg
Dmitry15.07.2018
12:13:31
12:13:31
гайс а где вы описывание вот такие хендлеры
т.е простыой компоуз екшинов под какой-то компонент
т.е есть какой-то хендлер в котором вызываются два екшина и этот хендлер специфический под какой-то компонент и реюзать его смысла нету
на каком уровне вы это описываете ?
Naught15.07.2018
12:29:17
12:29:17
проверяй на то что этот обьект есть, если его нет то показывай лоадер
Это помогает. Я не совсем верно представлял цикл работы компонентов реакта. Придётся поменять некоторые вещи.Ruslan ?15.07.2018
12:29:48
12:29:48
на каком уровне вы это описываете ?
...этот хендлер специфический под какой-то компонент
в файле компонента скорее всегоGoogleAbu15.07.2018
12:30:32
12:30:32
Это помогает. Я не совсем верно представлял цикл работы компонентов реакта. Придётся поменять некоторые вещи.
Эт же не цикл работы компонентов. Просто асинхронный код ??♂️Dmitry15.07.2018
12:30:50
12:30:50
в этом хендлере
Dmitry15.07.2018
12:32:03
12:32:03
так их забиндить к диспатчу надо
в эту функцию надо потом выходит диспатч передавать
Naught15.07.2018
12:32:21
12:32:21
Эт же не цикл работы компонентов. Просто асинхронный код ??♂️
У меня пока подход не предусматривал возможность подключения лоадера или неполного рендеринга. Я ожидал, что первичный рендер происходит со всеми данными.Naught15.07.2018
12:32:59
12:32:59
Как в реакте осуществляется работа с куками? Я могу как-то считывать и отслеживать их на предмет изменения?
Dmitry15.07.2018
12:33:53
12:33:53
и потом в итоге что у тебя выходит ?
Ruslan ?15.07.2018
12:34:05
12:34:05
или создаёшь hadlerCreator
Dmitry15.07.2018
12:34:16
12:34:16
ну не особо читабельно выглядит
потом где-то проеб и у тебя шелоу иквалс отвалится
Vitaliy15.07.2018
12:34:40
12:34:40
Кстати есть хорошие инструменты для перформанса страниц, отслеживать кол-во перерендеров каждого компонента, и так далее?
Ruslan ?15.07.2018
12:36:36
12:36:36
и потом в итоге что у тебя выходит ?
onclick={handleRestoreClick(effects, splitByLocation)}
вернёт функиюDmitry15.07.2018
12:36:47
12:36:47
ок, но тут новый екшин каждый раз будет
GoogleRuslan ?15.07.2018
12:39:29
12:39:29
VladislavAdminERROR: S client not available
Dmitry15.07.2018
12:41:12
12:41:12
и это ломает тебе шелоу иквалс
С хоками там другая проблема, что тебе надо кучу всего еще импортить и долго переписывать с обычного коннекта
самым приятным выглядит это переписать компонент на класс
Ruslan ?15.07.2018
12:43:43
12:43:43
compose( withHandler(), connect())
Dmitry15.07.2018
12:44:11
12:44:11
да, тебе надо заимпортить функцию компоуз, заимпортить виз хендлер, и переставить кучу скобочек
Ruslan ?15.07.2018
12:50:11
12:50:11
да, тебе надо заимпортить функцию компоуз, заимпортить виз хендлер, и переставить кучу скобочек
изначально неверный подход: передавать экшены в виде пропсовAlex15.07.2018
12:52:38
12:52:38
приветы
Кирилл15.07.2018
12:52:55
12:52:55
qq
Google
Evgeny15.07.2018
12:53:02
12:53:02
Здарова
Alex15.07.2018
12:53:16
12:53:16
в каждой строчке таблице в одной из колонок отрисовывается select, реакт ругается на неуникальность ключей
Кирилл15.07.2018
12:53:18
12:53:18
Шо нада?
Alex15.07.2018
12:53:21
12:53:21
как можно решить вопрос?
Ruslan ?15.07.2018
12:53:39
12:53:39
Dmitry15.07.2018
12:53:54
12:53:54
CenatorAlex15.07.2018
12:54:28
12:54:28
получается что у строчки ключ уникальный, но в каждой строчке есть колонка, где ключ не уникален для всей таблицы
Evgeny15.07.2018
12:54:32
12:54:32
толстые уродливые компоненты, нельзя просто так взять и вынести логику, стейт
Можно где твой код посмотреть?Dmitry15.07.2018
12:54:52
12:54:52
толстые уродливые компоненты, нельзя просто так взять и вынести логику, стейт
Как логику в компоненте и не надо писать, нужно понимать где логика, а где просто несколько екшинов надо взыватьне надо воообще их в реакт тащить, только хуже станет
Ruslan ?15.07.2018
12:56:02
12:56:02
Alex15.07.2018
12:56:43
12:56:43
народ, есть у кого какие мысли? :)
Dmitry15.07.2018
12:56:44
12:56:44
какая разница какие обзерваблы, если сам подоход с обзерваблами в реакт компонентах не даст ниче хорошего
и я вообще не понимаю как это решит проблему с толтсыми компонентами
Effy15.07.2018
12:57:57
12:57:57
Здравствуйте коллеги
Ruslan ?15.07.2018
12:58:04
12:58:04
Как логику в компоненте и не надо писать, нужно понимать где логика, а где просто несколько екшинов надо взывать
ну ты же хочешь хэндлер воткнуть в компонент, который только за представление отвечаетEvgeny15.07.2018
12:58:12
12:58:12
народ, есть у кого какие мысли? :)
Хз, у меня таблица рендерится, в каждой строчке у ячеек ключи от 0 до конца по порядку, никаких проблем
Открыть в Telegram