Блог

Я пишу игру в инкрементном стиле в React, и у меня есть этот setInterval внутри App.ts:

   useEffect(() => {
    const loop = setInterval(() => {
      if (runStatus) {
        setTime(time   1);
      }
    }, rate);

    return () => clearInterval(loop);
  });
 

У меня также есть различные обработчики событий в соответствии с:

 <button onClick={() => increment(counter   1)}>Increment</button>
 

К сожалению, если я нажму эту кнопку несколько раз в секунду, это заблокирует обновление time состояния setInterval.

Это состояние с использованием перехватов, а также сохраненного состояния Redux.

Как я могу, по крайней мере, надежно установить галочку setInterval, чтобы я мог перемещаться по странице, не блокируя ее?

Сделайте это так

[] пустая зависимость означает выполнение только при монтировании компонента.

 useEffect(() => {
    const loop = setInterval(() => {
      if (runStatus) {
        setTime(prev => prev   1);
      }
    }, rate);

    return () => clearInterval(loop);
}, []); <--- add that []
 

Примечания

1. добавление времени в качестве зависимости создаст бесконечный цикл
2. вам нужно добавить runStatus rate переменную or в качестве зависимости, если ее динамическое состояние