Привет. Может кто знает: Как в react на onClick тригерить событие только один раз? (once)

Привет. Может кто знает: Как в react на onClick тригерить событие только один раз? (once)

после первого раза - поставь флаг в стейт и проверяй на его наличие, как вариант

после первого раза - поставь флаг в стейт и проверяй на его наличие, как вариант

Я просто не хочу стейт мусорить из-за такой маленькой проблемы) У меня ситуация какая: на странице есть 12 кликабельных картинок, при нажатии на картинку - получаю ответ от сервера и создаю с неё класс. Проблема заключается в том, что если на сервере какие-то траблы, задержки, пинги - то я могу нажать на кнопку дважды, и сервер меня отрубает, так как видит не то что хочет

Оберни в once и всё, не?

после первого раза - поставь флаг в стейт и проверяй на его наличие, как вариант

на нативном уровне нашёл что-то похожее, но как его применить к onClick реакта - хз

в класс сохрани как oncedActions = once(this.action)

в класс сохрани как oncedActions = once(this.action)

сейчас буду пробовать, пасиб

если сразу так не сработает (возможно в этот момент не будет ещё ссылки на функцию сделай так: oncedActions = once((…args) => this.action(...args))

в класс сохрани как oncedActions = once(this.action)

этот once https://github.com/isaacs/once ?

Ищу хорошего ментора, наставника. Пишите в ЛС

Лично я юзаю в проекте lodash и там есть once

а так, если не хочешь тащить зависимоти он очень легко пишется

А то что кликнули знать не надо? Изменить что-то на экране, сделать кнопку “выбранной” и так далее?

а так, если не хочешь тащить зависимоти он очень легко пишется

угу. по сути простое замыкание, аля теже throttle и debounce просто было подумал "неужели оно есть изкоропки, а я не знал О_О"

А то что кликнули знать не надо? Изменить что-то на экране, сделать кнопку “выбранной” и так далее?

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

а потом? хранить состояние и делай кнопку disabled

а потом? хранить состояние и делай кнопку disabled

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

Ну тебе же наверняка надо стилями как-то выделить что кнопка отключена или нет?

Ну тебе же наверняка надо стилями как-то выделить что кнопка отключена или нет?

Так и есть. Стилями кнопка при наведении подсвечивается, после онклик пропадает подсветка, с этим все ок) Надо предотвратить двойной запрос при задержках на сервере(

Ну once для этого подходит я думаю

Ухади

Утро доброе. Как в ssr определяется какая часть стора принадлежит какому компоненту?

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

Эээ какого стора? Ридакс?

Эээ какого стора? Ридакс?

К примеру.

Мне нужно понять просто механизм работы на примере любого стора.

Мне нужно понять просто механизм работы на примере любого стора.

Разве часть стора принадлежит компоненту?

Разве часть стора принадлежит компоненту?

Ну, компонент ассоциирован с частью стора.

Ну, компонент ассоциирован с частью стора.

Коннект что ли?

Коннект что ли?

К примеру.

Есть структура function App(cond) { return <> <A /> <A /> cond && <A /> </> } Каждый из компонентов сам себя регистрирует в сторе.

Возможна ли такая работа вкупе с ssr?

Есть структура function App(cond) { return <> <A /> <A /> cond && <A /> </> } Каждый из компонентов сам себя регистрирует в сторе.

Если они через контекст получают стор то почему нет?

Если они через контекст получают стор то почему нет?

У каждого своя ветка в редаксе?

Если да, то ситуация: тебе с фронта прилетел стор. Как определить какая из веток стора ассоциирована с каким либо компонентом?

Хм... А для ssr же позволяется модифицировать React.Component?)

Т.е. засунуть туда какой-нибудь id и через него делать ассоциацию.

@itsjohncena ^

Если да, то ситуация: тебе с фронта прилетел стор. Как определить какая из веток стора ассоциирована с каким либо компонентом?

ветки же не ассоциированы с компонентом, они все видят весь стор в mSTP и куда с фронта стор прилетает?

ветки же не ассоциированы с компонентом, они все видят весь стор в mSTP и куда с фронта стор прилетает?

Если не ассоциированы, то тем более. Как связи сохраняются? А для ssr для каждого пользователя своя сессия создаётся? Как состояние сохранять?

Если не ассоциированы, то тем более. Как связи сохраняются? А для ssr для каждого пользователя своя сессия создаётся? Как состояние сохранять?

ответь плс на вопрос

ответь плс на вопрос

Так я ответил. Я вижу ssr как stateless процесс. К тебе прилетает стор, ты отдаёшь страницу с новым состоянием стора и т.д.

Из этого вытекают вопросы.

Если не ассоциированы, то тем более. Как связи сохраняются? А для ssr для каждого пользователя своя сессия создаётся? Как состояние сохранять?

стор не прилетает с фронта никуда

стор не прилетает с фронта никуда

Т.е. для каждого пользователя заводится сессия отдельная?

Т.е. для каждого пользователя заводится сессия отдельная?

в хендлере роута у тебя вызывается createStore и оно передается провайдеру, дальше getState и в жсон

Всем привет, как вы избегаете такое решение? Чтобы не падала конструкция, когда arr = undefined , либо arr = {[worse: 1234]} помогает логическое или, но выглядит очень примитивно. const {worse} = R.head(arr) || []

Всем привет, как вы избегаете такое решение? Чтобы не падала конструкция, когда arr = undefined , либо arr = {[worse: 1234]} помогает логическое или, но выглядит очень примитивно. const {worse} = R.head(arr) || []

R.pathOr('default_value', [0, 'worse'], [{worse: 1234}])

R.pathOr('default_value', [0, 'worse'], [{worse: 1234}])

super, спасибо

в хендлере роута у тебя вызывается createStore и оно передается провайдеру, дальше getState и в жсон

было бы всё так просто

подскажите плиз const { jackpot: { list, loaded }, data: { name = '' } } = nextProps; пишет Cannot read property 'name' of undefined at getDerivedStateFromProps

Коллеги, использую ReactTable Filter: ({ filter, onChange }) => <select onChange={event => onChange(event.target.value)} style={{ width: "100%" }} value={filter ? filter.value : "all"} > <option value="all">Показать все</option> <option value="future">Предстоящие</option> <option value="past">Прошедшие</option> </select> Есть такой код, как сделать чтобы один из option был по умолчанию?

selected не работает

подскажите плиз const { jackpot: { list, loaded }, data: { name = '' } } = nextProps; пишет Cannot read property 'name' of undefined at getDerivedStateFromProps

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

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

понятно

чот некстжс хуйню творит при ssr

зачем-то лезет в lc

а ну да, он же рендер дергает, чтобы получить результат

кек

класс, сегодня целый день убью на обработку ошибок

ERROR: S client not available

??

У меня есть компонент, в нем два чайлда, если стэйт парэнта меняется то чайлды перерисовывать так ли это?

Т.е. по сути их пропсы чайлдов не меняются

У меня есть компонент, в нем два чайлда, если стэйт парэнта меняется то чайлды перерисовывать так ли это?

При условии что пэрент перерисуется, то и они, если без оверрайта scu

Т.е. по сути их пропсы чайлдов не меняются

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

Если он есть?

Это сообщение значит

Если он есть?

Наследуются чайлды от PureComp?

Ну это я знаю

Ну это я знаю

https://reactjs.org/docs/optimizing-performance.html#shouldcomponentupdate-in-action

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

Иначе говно

Иначе говно

не пиши столбиком

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

Преждевременная оптимизация бла бла бла

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

*пропсы не стоит генерить...

*пропсы не стоит генерить...

редактируй сообщение

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

Я думаю тебе лучше переформулировать и не мешать одни проблемы с другими

Ок сори.

@javascript_jobs

render() { const { text, value } = this.state; const onClick =(e)={ props.handleOnClick(text, e) } return (<div> <LessState text={this.state.less.text} value={this.state.less.value} onClick={onClick} /> .... меня всегда учили так не передовать handlers так как каждый раз при перерисвоке парента создается новый onCklick но это выходит бессмысленно если LessState не наследуется от Pure?

render() { const { text, value } = this.state; const onClick =(e)={ props.handleOnClick(text, e) } return (<div> <LessState text={this.state.less.text} value={this.state.less.value} onClick={onClick} /> .... меня всегда учили так не передовать handlers так как каждый раз при перерисвоке парента создается новый onCklick но это выходит бессмысленно если LessState не наследуется от Pure?

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

render() { const { text, value } = this.state; const onClick =(e)={ props.handleOnClick(text, e) } return (<div> <LessState text={this.state.less.text} value={this.state.less.value} onClick={onClick} /> .... меня всегда учили так не передовать handlers так как каждый раз при перерисвоке парента создается новый onCklick но это выходит бессмысленно если LessState не наследуется от Pure?

Хенлдер определить по-хорошему вне рендера

А тут кто-нибудь может какие-нибудь курсы по реакту порекомендовать? А то я проходил такие. Вроде все понято но курсовой выполнить не смог. Я дизайнер интерфейсов который хочет сразу делать компоненты в реакте и их править там же. Чтобы максимально сократить плечо интерпретации дизайна в коде? Оно вообще стоит того?

render() { const { text, value } = this.state; const onClick =(e)={ props.handleOnClick(text, e) } return (<div> <LessState text={this.state.less.text} value={this.state.less.value} onClick={onClick} /> .... меня всегда учили так не передовать handlers так как каждый раз при перерисвоке парента создается новый onCklick но это выходит бессмысленно если LessState не наследуется от Pure?

const onClick =(text, e)={ this.props.handleOnClick(text, e) } render() { const { text, value } = this.state; return (<div> <LessState text={this.state.less.text} value={this.state.less.value} onClick={this.onClick(text)} />

А тут кто-нибудь может какие-нибудь курсы по реакту порекомендовать? А то я проходил такие. Вроде все понято но курсовой выполнить не смог. Я дизайнер интерфейсов который хочет сразу делать компоненты в реакте и их править там же. Чтобы максимально сократить плечо интерпретации дизайна в коде? Оно вообще стоит того?

erodionov.ru

А тут кто-нибудь может какие-нибудь курсы по реакту порекомендовать? А то я проходил такие. Вроде все понято но курсовой выполнить не смог. Я дизайнер интерфейсов который хочет сразу делать компоненты в реакте и их править там же. Чтобы максимально сократить плечо интерпретации дизайна в коде? Оно вообще стоит того?

wesbos

если инглиш ноу

ну или то шо выше

Wesbos я подписался. Там и по js есть