169 похожих чатов

Всем привет! Подскажите, как можно запустить useEffect после определенного действия?

В моем случае нужно сделать кнопку повторной отправки смс после окончания 60 секунд таймера. А таймер должен запускаться после нажатия на кнопку "отправить СМС"

86 ответов

23 просмотра

вряд ли вам для этого useEffect нужен

Kazbek-Beteev Автор вопроса

Мне нужен перерендер, так как таймер меняется в кнопке

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

Kazbek Beteev
Мне нужен перерендер, так как таймер меняется в кн...

посмотри как тут сделано https://github.com/thibaultboursier/use-timer

Kazbek-Beteev Автор вопроса
Тот самый Тимофей
Да юз эффект вроде и не нужен. Делаешь отдельный м...

Я так понимаю, тут классическое замыкание, каунтер в минус уходит, так как видит, что repeatCounter всегда равен 4

const Component = () => { const [isDisabled, setIsDisabled] = useState(false); return ( <button disabled={isDisabled} onClick={() => { setIsDisabled(true); setTimeout(() => setIsDisabled(false), 60000); }}> ); }

useEffect if (counter == 60) return Всё что захочешь

Kazbek-Beteev Автор вопроса
Kazbek Beteev
screenshot

Как внутри if const === 5 может выполниться условие if const < 1?

Kazbek-Beteev Автор вопроса
Ivan 🧑‍🚀
screenshot

Блин, действительно, невнимательность. Спасибо!

Kazbek-Beteev Автор вопроса
Ivan 🧑‍🚀
screenshot

Все равно не желает очищаться, после повторного запуска какая-то хрень происходит)

Kazbek Beteev
Все равно не желает очищаться, после повторного за...

Потому что срабатывает эффект, вы не установили триггер для выполнения этого эффекта

Kazbek-Beteev Автор вопроса
Денис
Потому что срабатывает эффект, вы не установили тр...

Я вот и задал вопрос вначале - как стриггерить эффект) Как это можно сделать?

Kazbek Beteev
Все равно не желает очищаться, после повторного за...

покажи ещё раз код, где создаётся интервал и где он очищается

Kazbek Beteev
screenshot

так, return () => используют для того что бы выполнить функицю перед анмаунтом, ты уверен что у тебя clearInterval вообще срабатывает? Попробуй вместо () => clearInterval, просто clearInterval

Kazbek-Beteev Автор вопроса
Without Hands
так, return () => используют для того что бы выпо...

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

Kazbek-Beteev Автор вопроса
Without Hands
так, return () => используют для того что бы выпо...

Но внутрь условия (repeatCounter < 1) он проходит

Kazbek Beteev
Но внутрь условия (repeatCounter < 1) он проходит

тебе нужно при определённом условии чистить пердидущий интервал и ставить новый? Правильно?

Kazbek-Beteev Автор вопроса
Without Hands
тебе нужно при определённом условии чистить пердид...

мне нужно при достижении 0 очищать его и при новом нажатии на "Отправить повторно" запускать заново

Kazbek Beteev
мне нужно при достижении 0 очищать его и при новом...

я думал что у тебя interval между useEffect'ами не сохраняется, тебе нужно вынести его в useRef, сейчас покажу

Kazbek Beteev
screenshot

Это какой code editor?

Kazbek-Beteev Автор вопроса
Kazbek Beteev
webstorm

Спасибо?

Kazbek-Beteev Автор вопроса
Xurshed
Реакт Иде?

нет, просто ide

Without Hands
https://codesandbox.io/s/winter-sunset-yqs7s?file=...

ну и в каком нибудь useEffect'e желательно сделать return () => { clearInterval(interval.current)}, что бы при анмаунте у тебя интервал так же очищался

Kazbek-Beteev Автор вопроса
Without Hands
ну и в каком нибудь useEffect'e желательно сделать...

Не помогло. Повторный запуск тикает гораздо быстрее предыдущего

Kazbek Beteev
screenshot

можешь в песочницу закинуть?

Kazbek-Beteev Автор вопроса
Without Hands
можешь в песочницу закинуть?

Ох, там куча всяких зависимостей, думаю слишком долго это будет

Kazbek Beteev
screenshot

ты понимаешь что у тебя делает первый useEffect и когда?

Kazbek-Beteev Автор вопроса
Without Hands
ты понимаешь что у тебя делает первый useEffect и ...

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

Kazbek Beteev
screenshot

Ты забыл зависимость указать

Денис
Ты забыл зависимость указать

Что бы срабатывало только после того как изменился Стейт

Kazbek-Beteev Автор вопроса
Kazbek Beteev
что-то не то, таймер не работает

Разберитесь, как работают методы жизненного цикла в реакте и как работает апи браузера а именно setTimeout, потом пробуйте

Kazbek-Beteev Автор вопроса
Without Hands
можешь в песочницу закинуть?

https://codesandbox.io/s/polished-leftpad-g9xuh?file=/src/App.js

Kazbek-Beteev Автор вопроса
Kazbek-Beteev Автор вопроса
Without Hands
ты походу не сохранил

Хмм, вот сейчас нажал сохранить

Kazbek Beteev
Хмм, вот сейчас нажал сохранить

так, что оно должно сделать?

Kazbek-Beteev Автор вопроса
Without Hands
так, что оно должно сделать?

Оно должно при нажатии на кнопку запускать таймер заново))

Kazbek Beteev
https://codesandbox.io/s/polished-leftpad-g9xuh?fi...

https://overreacted.io/making-setinterval-declarative-with-react-hooks/

Kazbek-Beteev Автор вопроса
Dmitriy Shuleshov
Какая конечная задача?

У меня есть форма отправки пароля. При нажатии "Отправить СМС" запускается таймер на кнопку повторной отправки СМС. Сам таймер (как UI) тикает в кнопке. При окончании таймера кнопка становится active и дает отправить СМС заново, после нажатия таймер начинает тикать заново

Kazbek-Beteev Автор вопроса
Without Hands
у тебя второй useEffect сразу же его очищает

Так я как у тебя в примере сделал

Kazbek Beteev
Так я как у тебя в примере сделал

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

Kazbek Beteev
У меня есть форма отправки пароля. При нажатии "От...

Читайте статью что я скинул выше, ваших познаний в js и реакте не хватает реализовать это

Without Hands
https://codesandbox.io/s/wizardly-driscoll-tokqh?f...

не уверен чего именно ты хотел добится, но вот

Kazbek-Beteev Автор вопроса
Without Hands
не уверен чего именно ты хотел добится, но вот

Да, это именно оно, Спасибо! А интервал не очищается получается самый первый?

Kazbek Beteev
ага

ну он в тот момент будет null, нечего очищать

Kazbek-Beteev Автор вопроса
Without Hands
ну он в тот момент будет null, нечего очищать

Почему null? Нажал - запустил первый, нажал - запустил второй, соответственно последний все время тикает

Kazbek Beteev
Почему null? Нажал - запустил первый, нажал - запу...

а, я думал ты про самый самый первый клик, он предидущий чистит и создаёт новый, по-этому предидущие уже не тикают

Kazbek Beteev
Почему null? Нажал - запустил первый, нажал - запу...

посмотри что будет если очень много раз кликать

Kazbek-Beteev Автор вопроса
Without Hands
а, я думал ты про самый самый первый клик, он пред...

да, я перепутал, самый последний получается

Kazbek-Beteev Автор вопроса
Without Hands
посмотри что будет если очень много раз кликать

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

Kazbek-Beteev Автор вопроса
Without Hands
посмотри что будет если очень много раз кликать

Сорян за дезинформацию, затупил, буду при анмаунте очищать

Kazbek Beteev
Ничего не произойдет, все будет ок, но последний в...

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

Kazbek Beteev
Сорян за дезинформацию, затупил, буду при анмаунте...

но это тоже надо, что бы не было мемори ликов

Kazbek-Beteev Автор вопроса
Without Hands
но это тоже надо, что бы не было мемори ликов

Теперь не понимаю почему таймер не тикает при добавлении юзЭффекта с очисткой)

Kazbek Beteev
screenshot

Поставь [] в зависимости

Kazbek-Beteev Автор вопроса
Without Hands
Поставь [] в зависимости

Заработало, но какая в этом логика? Разве отсутствие зависимостей не равно пустому массиву завивимостей юзЭффекта?

Kazbek Beteev
screenshot

Просто прочитай статью и разберись, как правильно работать с интервалами в функциональных компонентах https://overreacted.io/a-complete-guide-to-useeffect/

Похожие вопросы

Обсуждают сегодня

Господа, а что сейчас вообще с рынком труда на делфи происходит? Какова ситуация?
Rꙮman Yankꙮvsky
29
А вообще, что может смущать в самой Julia - бы сказал, что нет единого стандартного подхода по многим моментам, поэтому многое выглядит как "хаки" и произвол. Короче говоря, с...
Viktor G.
2
30500 за редактор? )
Владимир
47
а через ESC-код ?
Alexey Kulakov
29
Чёт не понял, я ж правильной функцией воспользовался чтобы вывести отладочную информацию? но что-то она не ловится
notme
18
У меня есть функция где происходит это: write_bit(buffer, 1); write_bit(buffer, 0); write_bit(buffer, 1); write_bit(buffer, 1); write_bit(buffer, 1); w...
~
14
Добрый день! Скажите пожалуйста, а какие программы вы бы рекомендовали написать для того, чтобы научиться управлять памятью? Можно написать динамический массив, можно связный ...
Филипп
7
Недавно Google Project Zero нашёл багу в SQLite с помощью LLM, о чём достаточно было шумно в определённых интернетах, которые сопровождались рассказами, что скоро всех "ибешни...
Alex Sherbakov
5
Ребят в СИ можно реализовать ООП?
Николай
33
https://github.com/erlang/otp/blob/OTP-27.1/lib/kernel/src/logger_h_common.erl#L174 https://github.com/erlang/otp/blob/OTP-27.1/lib/kernel/src/logger_olp.erl#L76 15 лет назад...
Maksim Lapshin
20
Карта сайта