Функция обратного вызова setInterval не является динамической (Redux props)

#javascript #reactjs #redux #setinterval

Вопрос:

У меня простой js setInterval , где мой обратный вызов просто проверяет некоторую Redux переменную:

 setInterval(() => {
    console.log(props.myStateVariable);
}, 5000);

Проблема в том, что она просто печатает все, что было переменной во время создания этого setInterval экземпляра. Как сделать ее динамической? Спасибо

Редактировать

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

1. Вы пытались передать ее в качестве параметра функции?

2. Вы пробовали использовать useSelector hook? Это то, что я использую для получения динамических значений из хранилища redux. react-redux.js.org/api/hooks

3. Спасибо @Viet…

4. На самом деле нет, ни один из комментариев не работает…

5. @true_gler Вы имеете в виду передать значение реквизита? Но вот в чем дело: я изначально не знаю этого значения и хочу выводить его каждые 5 секунд.

Ответ №1:

Попробуйте сохранить интервальную функцию в переменной, переопределяйте интервальную функцию каждый раз, когда изменяется props.myStateVariable:

 const interval = useRef(null);
useEffect(()=> {
  interval.current = setInterval(() => {
    console.log(props.myStateVariable);
  }, 5000);
  return ()=> clearInterval(interval.current);
}, [props.myStateVariable]);

Редактировать:

Если вы не хотите переопределять интервал каждый раз при изменении свойства, вы можете использовать useRef перехват для сохранения значения свойства. Таким образом, вы можете получить доступ к его значению:

 const propRef = useRef(null);
propRef.current = props.myStateVariable;

useEffect(()=> {
  const interval = setInterval(() => {
    console.log(propRef.current);
  }, 5000);
  return ()=> clearInterval(interval);
}, []);

1. Спасибо, чувак, я слишком долго с этим боролся 🙂

2. Приветствую вас. Также вам не нужно создавать ссылку, вы можете создать переменную внутри useEffect, и она тоже должна работать. useEffect(()=> { const interval = setInterval(() => {console.log(props.myStateVariable); }, 5000); return ()=> clearInterval(интервал); }, [props.myStateVariable]). Ссылка полезна, если вам нужно использовать ее в других местах

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

4. Я отредактировал свой вопрос, может быть, у вас есть ответ?

5. Как пробовал с государством, не сработало. Пробовал с неизменяемым js, не сработало. Попытка с redux не сработала. Серьезно, у react functional components есть некоторые проблемы с рендерингом.. Ваше решение сработало, брат.. Спасибо