React中useReducer结合addEventListener出现多次按键触发问题

你遇到的重复输入问题，核心原因有两点：

1. 多组件重复绑定监听器：每个DigitButton实例都会挂载一个keypress监听器，比如0-9十个数字按钮就会生成10个监听器，按下一次按键时所有监听器都会触发，导致多次dispatch重复添加数字。
2. 未清理监听器+无依赖数组：你的useEffect既没设置依赖数组，也没返回清理函数，组件每次重渲染都会新增监听器，导致重复触发次数随渲染次数增加而越来越多。

方案一：将键盘监听移到父组件（推荐） #

把键盘事件监听统一放在父组件（如App）中，只绑定一次监听器，避免多组件重复绑定，逻辑更集中且性能更优。

修改父组件（App.js）代码： #

import { useEffect, useReducer } from 'react';
import { ACTIONS } from './ACTIONS';
import DigitButton from './DigitButton';

// 假设你的reducer和初始状态定义
const initialState = { /* 你的初始状态 */ };
function reducer(state, action) { /* 你的reducer逻辑 */ }

function App() {
  const [state, dispatch] = useReducer(reducer, initialState);

  useEffect(() => {
    const handleKeyPress = (event) => {
      // 只处理数字和小数点按键（可根据需求扩展）
      if (/[0-9.]/.test(event.key)) {
        dispatch({
          type: ACTIONS.ADD_DIGIT,
          payload: { digit: event.key }
        });
      }
      // 可在此扩展处理其他按键（如运算符、退格、回车等）
    };

    window.addEventListener('keypress', handleKeyPress);
    // 组件卸载时清理监听器
    return () => window.removeEventListener('keypress', handleKeyPress);
  }, [dispatch]); // 依赖dispatch确保回调引用正确

  return (
    <div className="calculator">
      {/* 其他组件（如显示屏幕、运算符按钮） */}
      <DigitButton digit="0" dispatch={dispatch} />
      <DigitButton digit="1" dispatch={dispatch} />
      {/* 其他数字按钮 */}
    </div>
  );
}

export default App;

简化DigitButton组件： #

去掉组件内的useEffect，只保留点击事件逻辑即可：

import { ACTIONS } from "./App";

export default function DigitButton({ dispatch, digit }) {
  return (
    <button
      onClick={() => {
        dispatch({
          type: ACTIONS.ADD_DIGIT,
          payload: { digit }
        });
      }}
    >
      {digit}
    </button>
  );
}

方案二：在DigitButton组件内优化监听（不推荐，仅作参考） #

如果必须在子组件处理键盘监听，需添加清理函数，并限制仅按键匹配当前组件的digit时才触发dispatch：

import { ACTIONS } from "./App";
import { useEffect } from "react";

export default function DigitButton({ dispatch, digit }) {
  useEffect(() => {
    const handleKeyPress = (event) => {
      // 仅当按键等于当前按钮的digit时执行
      if (event.key === digit) {
        dispatch({
          type: ACTIONS.ADD_DIGIT,
          payload: { digit: event.key }
        });
      }
    };

    window.addEventListener('keypress', handleKeyPress);
    // 组件卸载时移除监听器
    return () => window.removeEventListener('keypress', handleKeyPress);
  }, [dispatch, digit]); // 添加依赖数组，确保监听器正确更新

  return (
    <button
      onClick={() => {
        dispatch({
          type: ACTIONS.ADD_DIGIT,
          payload: { digit }
        });
      }}
    >
      {digit}
    </button>
  );
}

内容的提问来源于stack exchange，提问作者Akshat Sharma