问题：

目标：每次按下“W+C+N”键，屏幕上都会随机出现一个图像。
实际结果：图像只会每两个按键出现一次。例如，如果我在“W+C+N”上按4次，只会出现2个新图像。

我试过/猜测问题出在哪里：

我的useEffect的误用，它要么来自：

• 对removeEventListener方法的误解，它是否“禁用”了handleKey函数中的setcoordinates？
• 未指定正确的依赖项[handleKey]：handleKey函数是通过按键激活的，并且在新的坐标上改变。所以每次传递新的坐标时重新渲染似乎是正确的
• VS代码警告：“”handleKey”函数使useState Hook的依赖项在每次呈现时都发生变化。请将其移到useEffect回调中。”我确实尝试过，但它不再工作了。

我的真实代码

import egg from "./logo.png";
import { useState, useEffect } from "react";

function App() {
  let map = []; //array of keys to store
  const [coordinates, setcoordinates] = useState([]); //array of image coordinates

  const handleKey = (event) => {
    onkeydown = onkeyup = function (event) {
      map[event.keyCode] = event.type === "keydown";
    };
    //random image coordinates
    if (map[87] && map[67] && map[78]) {
      const newCoordinates = [...coordinates];
      let random_left = Math.floor(Math.random() * window.innerWidth);
      let random_top = Math.floor(Math.random() * window.innerHeight);
      newCoordinates.push({ left: random_left, top: random_top });
      setcoordinates(newCoordinates);
    }
  };
  useEffect(() => {
    window.addEventListener("keypress", handleKey);
    return () => {
      window.removeEventListener("keypress", handleKey);
    };
  }, [handleKey]);
  return (
    <div className="App">
      <img src={egg} alt="o easter egg" />
      <h1>Rocambole</h1>
      <h2>Good luck!</h2>
      {console.log(coordinates)}
      {coordinates.map((item, index) => {
        return (
          <img
            key={index}
            src={egg}
            alt="egg"
            className="newImg"
            style={{ top: `${item.top}px`, left: `${item.left}px` }}
          />
        );
      })}
    </div>
  );
}

export default App;