Как проверить состояние и выполнить функцию после некоторой задержки в React?
Я пытаюсь выполнить функцию, если состояние не меняется, которое обновляется из-за выборки базы данных. Я имею в виду:
const [value, setValue] = useState(false)
const func = () => {
...
}
setTimeout(()=>{
if (!value) {
func()
} else {
// Alert.alert("Nothing!")
funcWithoutDbOperations() // which is desired
}
},20000)
fetchData.then(()=>setValue(true))
Но этот метод тайм-аута принимает начальное состояние константы value и выполняется в соответствии с ее начальным значением, независимо от ее значения через 20 секунд. Даже если он обновится до true.
Как я могу достичь этой цели?
Вы не можете! React изменит значение value только при повторной визуализации компонента. Оно определяется как константа, чтобы намекнуть на такое поведение и напомнить вам, что оно не изменится. ваш предыдущий setTimeout никогда не будет иметь обновленное значение в области видимости.
@James Нет ли способа реализовать этот сценарий в React? Я имею в виду метод тайм-аута, использующий обновленное значение, полученное из выборки данных? После ответа существует setState, поэтому не следует ли его перерисовать?
Вам нужно будет использовать ссылку. Вам придется проделать дополнительную работу, чтобы синхронизировать ссылку со значением состояния, но ссылка должна быть доступна внутри замыкания как самое актуальное значение ref.currentTarget
Какое поведение вам нужно? получить данные, а затем вызвать func? получить данные, затем подождать 20 секунд, а затем вызвать func?
@James В функции есть некоторые операции обновления из базы данных. Я стараюсь свести к минимуму функции чтения/обновления из базы данных, поэтому стараюсь подождать 20 секунд перед чтением/обновлением из-за ответа. Я имею в виду ожидание 20 секунд в обоих сценариях. Можете ли вы привести пример использования ref относительно состояний?
@BrianThompson Можете ли вы привести пример использования ref в отношении состояний? Может быть, как ответ на эту тему?
@JeremyFc Эта ручка отвечает на твой вопрос? codepen.io/sandstone991/pen/ExJPYgR если да, то ответьте, чтобы я мог написать вам ответ, если нет, не могли бы вы проиллюстрировать?
@SandStone Это решение блокирует все ожидающие тайм-ауты, поэтому это не то решение, которое мне нужно. Сейчас я пробую решение plsdev89: stackoverflow.com/a/78117067/20742532
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вам нужно использовать Ref.
const [value, setValue] = useState(false)
const valueRef = useRef(value)
valueRef.current = value;
const func = () => {
...
}
setTimeout(()=>{
if (!valueRef.current) {
func()
} else {
// Alert.alert("Nothing!")
funcWithoutDbOperations() // which is desired
}
},20000)
fetchData.then(()=>setValue(true))
Я не это имел в виду. Я не пытаюсь выполнить функцию после обновления состояния. Можете ли вы еще раз прочитать мой вопрос, пожалуйста?
@JeremyFc Вам нужно использовать Ref.
Спасибо, это лучшее решение, чем метод очистки тайм-аута.
Почему вы пытаетесь это сделать? Интересно, может ли это быть проблема XY.