В моем случае нужно сделать кнопку повторной отправки смс после окончания 60 секунд таймера. А таймер должен запускаться после нажатия на кнопку "отправить СМС"
вряд ли вам для этого useEffect нужен
Мне нужен перерендер, так как таймер меняется в кнопке
Да юз эффект вроде и не нужен. Делаешь отдельный метод на изменение оставшегося времени, оборачиваешь в таймер и вяжешь на onClick. В юз эффекте нужно просто на анмаунте проверить, тикает ли таймер и отрубать его, чтобы утечку памяти не словить.
посмотри как тут сделано https://github.com/thibaultboursier/use-timer
Я так понимаю, тут классическое замыкание, каунтер в минус уходит, так как видит, что 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 Всё что захочешь
Как внутри if const === 5 может выполниться условие if const < 1?
Блин, действительно, невнимательность. Спасибо!
Все равно не желает очищаться, после повторного запуска какая-то хрень происходит)
Потому что срабатывает эффект, вы не установили триггер для выполнения этого эффекта
Я вот и задал вопрос вначале - как стриггерить эффект) Как это можно сделать?
Стейт sendSMS setSendSMS useState (false)
покажи ещё раз код, где создаётся интервал и где он очищается
так, return () => используют для того что бы выполнить функицю перед анмаунтом, ты уверен что у тебя clearInterval вообще срабатывает? Попробуй вместо () => clearInterval, просто clearInterval
Попробовал, все равно каждый новый запус каунтера быстрее предыдущего, я думаю он не очищается
Но внутрь условия (repeatCounter < 1) он проходит
Чем тебе не понравился мой вариант?
тебе нужно при определённом условии чистить пердидущий интервал и ставить новый? Правильно?
мне нужно при достижении 0 очищать его и при новом нажатии на "Отправить повторно" запускать заново
я думал что у тебя interval между useEffect'ами не сохраняется, тебе нужно вынести его в useRef, сейчас покажу
Это какой code editor?
webstorm
это ide, webstorm
https://codesandbox.io/s/winter-sunset-yqs7s?file=/src/App.js
Спасибо?
Реакт Иде?
Да)
нет, просто ide
ну и в каком нибудь useEffect'e желательно сделать return () => { clearInterval(interval.current)}, что бы при анмаунте у тебя интервал так же очищался
Не помогло. Повторный запуск тикает гораздо быстрее предыдущего
можешь в песочницу закинуть?
Ох, там куча всяких зависимостей, думаю слишком долго это будет
ты понимаешь что у тебя делает первый useEffect и когда?
первый useEffect запускает интервал, в котором меняет repeatCointer
Ты забыл зависимость указать
Что бы срабатывало только после того как изменился Стейт
что-то не то, таймер не работает
Зависимость repeatCounter?
Разберитесь, как работают методы жизненного цикла в реакте и как работает апи браузера а именно setTimeout, потом пробуйте
https://codesandbox.io/s/polished-leftpad-g9xuh?file=/src/App.js
А что-либо по-конкретнее подскажите?
ты походу не сохранил
Хмм, вот сейчас нажал сохранить
так, что оно должно сделать?
Оно должно при нажатии на кнопку запускать таймер заново))
Какая конечная задача?
у тебя второй useEffect сразу же его очищает
https://overreacted.io/making-setinterval-declarative-with-react-hooks/
У меня есть форма отправки пароля. При нажатии "Отправить СМС" запускается таймер на кнопку повторной отправки СМС. Сам таймер (как UI) тикает в кнопке. При окончании таймера кнопка становится active и дает отправить СМС заново, после нажатия таймер начинает тикать заново
Так я как у тебя в примере сделал
ну да, но должен быть другой тригер, или чистить перед тем как создать новый
Читайте статью что я скинул выше, ваших познаний в js и реакте не хватает реализовать это
Какой, например?
https://codesandbox.io/s/wizardly-driscoll-tokqh?file=/src/App.js
не уверен чего именно ты хотел добится, но вот
Да, это именно оно, Спасибо! А интервал не очищается получается самый первый?
имеешь ввиду при первом клике?
ну он в тот момент будет null, нечего очищать
Почему null? Нажал - запустил первый, нажал - запустил второй, соответственно последний все время тикает
а, я думал ты про самый самый первый клик, он предидущий чистит и создаёт новый, по-этому предидущие уже не тикают
посмотри что будет если очень много раз кликать
да, я перепутал, самый последний получается
Ничего не произойдет, все будет ок, но последний все равно в памяти будет тикать, так как не был очищен
Сорян за дезинформацию, затупил, буду при анмаунте очищать
всмысле будет тикать? он же закончится, сработает тело интервала, и всё
но это тоже надо, что бы не было мемори ликов
Теперь не понимаю почему таймер не тикает при добавлении юзЭффекта с очисткой)
Поставь [] в зависимости
Заработало, но какая в этом логика? Разве отсутствие зависимостей не равно пустому массиву завивимостей юзЭффекта?
Просто прочитай статью и разберись, как правильно работать с интервалами в функциональных компонентах https://overreacted.io/a-complete-guide-to-useeffect/
Нет зависимостей === апдейт каждый раз
Обсуждают сегодня