все отталкивается от урлов, а не от компонентов

им бы роуты сделать как в reach router

в итоге тебе приходится весь этот гемор с урлами вруную разруливать по всему приложению

там прям очень ахуенно. В одном месте все роуты можно сделать и смотреть какие страницы есть и делать код сплиттинг приятнее

им бы роуты сделать как в reach router

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

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

лучше им пользоваться чем rr4

лучше им пользоваться чем rr4

Чем? )

на хера указывать в компонентах path, при этом делая Link на урлы

Чем? )

чем rr4

Чем? )

вложеные роуты

вложеные роуты

Ролты

Ребят, а кто как борется с ошибкой вызова setState в unmounted компоненте?

Ребят, а кто как борется с ошибкой вызова setState в unmounted компоненте?

redux

Ролты

ну одно из двух

redux

не вариант

Ребят, а кто как борется с ошибкой вызова setState в unmounted компоненте?

либо надо проносить данные через пропсы от родителя

не вариант

вас ненавистников редакса послушать, так у вас все не вариант

зато вариант делать говнорешения неправильные постоянно ?

вас ненавистников редакса послушать, так у вас все не вариант

Ненавистники редакса в редакс чате, ты чуть ошибся

зато вариант делать говнорешения неправильные постоянно ?

т.е. тянуть редакс ради решения этой проблемы это не говнорешение?))

ну просто забавно когда люди и редакс юзать не хотят и локальным стейтом пользоваться не умеют правильно при этом

т.е. тянуть редакс ради решения этой проблемы это не говнорешение?))

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

а что там до фига тянуть придется?

Ребят, я хочу из state-less компонент переделать в stateful компонент (extends React.class ... ) const ContactCardStateLess = ({address, contacts, all, footer, header, tag, ...other}) => ( <Card {...other}> {<CardHeader>{header || 'Kontakt'}</CardHeader>} <CardContent> {contacts .filter(cont => all || (!all && (cont.isPrimary === 'true' || cont.isPrimary))) .map((cont, index) => { switch (cont.type) { case 'email': return ( <Data key={index} icon label="envelope" data={ <EmailLink onBackground templateData={{}} tag={tag} to={cont.value}> {cont.value} </EmailLink> } small /> ); case 'phone': return <Data key={index} icon label="phone" data={cont.value} small />; case 'mobile': return <Data key={index} icon label="mobile-phone" data={cont.value} small />; case 'fax': return <Data key={index} icon label="fax" data={cont.value} small />; default: return null; } })} {address && <Data icon label="map" data={<Address {...address} />} small />} </CardContent> {footer && <CardFooter>{footer}</CardFooter>} </Card> ); class ContactCardStateful extends React.Component { constructor(props) { super(props); this.state = { edit: false, contacts: props.contacts, }; } componentDidMount() { const {address, contacts, all, footer, header, tag, ...other} = this.props; } render() { return ( <Card {...other}> .... ... ... ... ); } } вот так правильно?

это что блеа тянуть редакс??

"тянут потянут вытянуть не могут" называется

Релакс, релакс. Я словно на какое то больное место у тебя наступил. Я понял твою позицию по редаксу, спасибо за совет

да только что с коллегой спорил по поводу редакса, просто

тоже все боится лишний килобайт с сервера тащить в веб

лучше потратить день на велосипед и кучу грабель собрать конечно же

тоже все боится лишний килобайт с сервера тащить в веб

При этом грузят картинки в сумме на 5 мегобоитов

Валерий, а браузер скачивает gzipped? Или минифед?

При этом грузят картинки в сумме на 5 мегобоитов

не поверишь, но так оно и есть, почему бы полупрозрачный фон на 500кб не затянуть

Валерий, а браузер скачивает gzipped? Или минифед?

все современные браузеры и все современные веб сервера умеют gz

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

Ребят, а кто как борется с ошибкой вызова setState в unmounted компоненте?

там где это вызывается (проблемное место), делай проверку (заранее заведи флажок this._mounted ) На cwu делай this._mounted = false

там где это вызывается (проблемное место), делай проверку (заранее заведи флажок this._mounted ) На cwu делай this._mounted = false

херовый совет

херовый совет

а) чем? б) что лучше?

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

либо запрос делается непосредственно из самого компонента

либо контекст и setState прокидывается туда куда не надо

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

либо через редакс

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

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

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

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

есть еще вариант прерывать запроспри анмаунте

но флажки расставлять это жесть

тем более где ты этот флажок поставишь?

в стейте компонента, который размаунтится к тому времени?

тем более где ты этот флажок поставишь?

я в коде видел это в this самого компонента

ну this уже не будет к тому времени

ну this уже не будет к тому времени

должно быть

да с какого перепуга?

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

{isVisible && <MyComponent />}

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

спорить не буду, примера под рукой нет, делать пример тоже нет сейчас желания. Если у вас есть - можете запилить что-нибудь, буду знать на будущее. Мне кажется, что флажок втыкался в this, но так как кейс это редкий, мог забыть p.s. и наверняка рендерилось не по условию ,а по роутеру в моей задаче. Но там скорее всего дело было в косяке архитектурном.

там где это вызывается (проблемное место), делай проверку (заранее заведи флажок this._mounted ) На cwu делай this._mounted = false

это решение я проверял, оно вполне рабочее, но вообще не советуют использовать его.

Ребят, а кто как борется с ошибкой вызова setState в unmounted компоненте?

Если речь про, например, запросы, то их можно отменять в cWU

это решение я проверял, оно вполне рабочее, но вообще не советуют использовать его.

причины “не советования” мы разобрали. Но раз работает и проблем нет - ок

А в react-router-dom нет что-то типо navigation, как в react-navigation?

browserHistory и props в которых много чего есть - https://reacttraining.com/react-router/web/api/history/history-is-mutable

причины “не советования” мы разобрали. Но раз работает и проблем нет - ок

я на самом деле не понял почему "не советуют" так как если к моменту размаунчивания переменной не будет, то это звоночек к тому чтобы не делать setState))

это решение я проверял, оно вполне рабочее, но вообще не советуют использовать его.

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

гарбадж коллектор то не может своевременно высвободить память

ERROR: S client not available

после завершения запроса то освободит

хотя звучит так себе

Мне даже интересно, как ещё можно вызвать setstate на отмонтированном компоненте. Запросы отменяются, интервалы/таймауты чистятся, от обсёрваблов можно отписаться, что остаётся?

Мне даже интересно, как ещё можно вызвать setstate на отмонтированном компоненте. Запросы отменяются, интервалы/таймауты чистятся, от обсёрваблов можно отписаться, что остаётся?

ну в данном случае не отменяется запрос, а если и отменять, то будет catch в любом случае

Мне даже интересно, как ещё можно вызвать setstate на отмонтированном компоненте. Запросы отменяются, интервалы/таймауты чистятся, от обсёрваблов можно отписаться, что остаётся?

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

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

ну в данном случае не отменяется запрос, а если и отменять, то будет catch в любом случае

Ну, в catch можно проверять, ошибка это или отмена, и ничего не делать, если отмена

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

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

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

типа <Child request={this.request} data={this.state.result} />

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

да, так и есть. Валерий говорит тему в рамках этой дискуссии

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

логика в чем. такая ошибка возникает при роутинге, так как в первом не успевает закончится запрос, перескакиваем на следующий

Ну, в catch можно проверять, ошибка это или отмена, и ничего не делать, если отмена

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

логика в чем. такая ошибка возникает при роутинге, так как в первом не успевает закончится запрос, перескакиваем на следующий

ну значит выносить функцию запроса еще выше и проносить пропсами опять же это при условии не использования редакса

либо делать вообще через context api

обернуть в провайдер весь роутинг

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

Всем привет, такой вопрос. В редакс сторе лежит массив с объектами, этот массив прикидывается в компонент-таблицу через connect и внутри мапится в строки этой таблицы. В компоненте также есть кнопка, при нажатии на нее массив в сторе сортируется, но при этом почему-то не происходит перерисовки таблицы. Как заставить перерисовываться компонент с таблицей при каждой сортировке массива?

ну значит выносить функцию запроса еще выше и проносить пропсами опять же это при условии не использования редакса

Это решение отличное я согласен, но применить его можно будет только со временем

Всем привет, такой вопрос. В редакс сторе лежит массив с объектами, этот массив прикидывается в компонент-таблицу через connect и внутри мапится в строки этой таблицы. В компоненте также есть кнопка, при нажатии на нее массив в сторе сортируется, но при этом почему-то не происходит перерисовки таблицы. Как заставить перерисовываться компонент с таблицей при каждой сортировке массива?

сортируешь через .sort ?

сортируешь через .sort ?

Да

Да

возьми из рамды сорт или любой другой иммутабельный

Да

Скорее всего, мутируешь данные

Или можно [...arr].sort()

Или можно [...arr].sort()

Так работает, спасибо!

Привет! У кого есть пример библиотеки со своими компонентами, которые опубликованы в NPM? Хотел бы глянуть, как правильно создавать такие библиотеки.

Привет! У кого есть пример библиотеки со своими компонентами, которые опубликованы в NPM? Хотел бы глянуть, как правильно создавать такие библиотеки.

Очень много вариантов. Достаточно загуглить

1 минута гугла.

Так работает, спасибо!

лучше не сортировать данные прямо в сторе для этого есть selectors

Ребят, а кто как борется с ошибкой вызова setState в unmounted компоненте?

У нас делали на каком-то проекте без редакса переменную this.mounted = true На componentWillUnmount this.mounted = false и оборачивали setState в проверку на маунт

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

У нас делали на каком-то проекте без редакса переменную this.mounted = true На componentWillUnmount this.mounted = false и оборачивали setState в проверку на маунт

Мы уже выше обсудили что это такое себе решение