React实现空格键事件序列循环执行的代码需求及尝试

你的代码存在几个核心问题，导致循环触发的逻辑无法正常工作，以下是问题分析和修复方案：

原代码的问题 #

• 普通变量无法持久化状态：spaceEventCounter是组件函数内的普通变量，每次组件因状态更新（比如调用setIsRunning）触发重渲染时，这个变量都会被重新初始化为1，直接破坏了状态流转的逻辑。
• 重复绑定事件监听器：组件每次render都会执行document.addEventListener，导致同一个键盘事件被绑定多个处理函数，触发时会重复执行逻辑，引发混乱。
• 事件处理逻辑分散：把keydown和keyup的逻辑拆成多个独立监听器，不利于维护和排查状态流转问题。

修复后的代码 #

import React, { useState, useEffect } from 'react';
import GenerateScramble from './ScrambleGenerator';
import SecondsCounter from './SecondsCounter';

function App() {
  const [isRunning, setIsRunning] = useState(false);
  // 用useState管理计数器，确保状态在重渲染时被保留
  const [spaceEventCounter, setSpaceEventCounter] = useState(1);

  useEffect(() => {
    // 合并事件处理逻辑，统一处理keydown和keyup
    const handleSpaceEvent = (event) => {
      if (event.code !== 'Space') return;

      // 根据事件类型和当前计数器状态执行对应逻辑
      if (event.type === 'keydown') {
        if (spaceEventCounter === 1) {
          console.log(spaceEventCounter);
          setSpaceEventCounter(2);
        } else if (spaceEventCounter === 3) {
          setIsRunning(false);
          console.log(spaceEventCounter);
          setSpaceEventCounter(4);
        }
      } else if (event.type === 'keyup') {
        if (spaceEventCounter === 2) {
          setIsRunning(true);
          console.log(spaceEventCounter);
          setSpaceEventCounter(3);
        } else if (spaceEventCounter === 4) {
          console.log(spaceEventCounter);
          setSpaceEventCounter(1);
        }
      }
    };

    // 绑定事件监听器
    document.addEventListener('keydown', handleSpaceEvent);
    document.addEventListener('keyup', handleSpaceEvent);

    // 组件卸载时移除监听器，避免内存泄漏
    return () => {
      document.removeEventListener('keydown', handleSpaceEvent);
      document.removeEventListener('keyup', handleSpaceEvent);
    };
  }, [spaceEventCounter]); // 依赖计数器状态，确保状态更新时事件逻辑能获取最新值

  return (
    <>
      <GenerateScramble />
      <SecondsCounter isRunning={isRunning} />
    </>
  );
}

export default App;

关键修改说明 #

1. 用useState管理计数器：将spaceEventCounter改为React状态变量，保证组件重渲染时状态不会被重置。
2. 统一事件处理逻辑：把keydown和keyup的处理逻辑合并到一个函数中，通过event.type区分事件类型，让状态流转更清晰。
3. 使用useEffect绑定/清理监听器：确保事件监听器只绑定一次，组件卸载时自动移除，避免重复触发和内存泄漏。
4. 严格状态流转：按照1(keydown) → 2(keyup) → 3(keydown) → 4(keyup) → 1的顺序循环，完全符合你需要的触发逻辑。

内容的提问来源于stack exchange，提问作者Oliver Bing