javascript - 我的反应网站在移动元素后冻结

Question

我是 React 的初学者，目前我想创建一辆可以在按下箭头键后移动的汽车。但是，一段时间后，该网站冻结，我什至无法打开控制台。

我的父组件

function App() {
    
    const [move, setMove] = useState("Standing");
    
      return (
        <>
        <h1 id="move">{move}</h1>
        <Car currentMove={move} whereMove={setMove} />
        </>
      )
    }

我的子组件

const Car = (props) => {

    let [x, setX] = useState(50);
    let [y, setY] = useState(50);

    let itemStyle = {
        top: y + "%",
        left: x + "%",
        color: "goldenrod"
    }

    window.addEventListener("keydown", event => startCar(event))

    function startCar(event) {
        console.log(event);
        switch (event.keyCode) {
            case 38:
                setY(y - 2);
                break;
            case 40:
                setY(y + 2);
                console.log(itemStyle);
                break;
            case 37:
                setX(x - 1);
                break;
            case 39:
                setX(x + 1)
                break;
        }
    }

    return (
        <>
        <div className="car" style={itemStyle}>X</div>
        </>
    )

}

标签： javascriptreactjsfreeze

Answer 1

您需要将 eventListener 移动到useEffect

useEffect(() => {
  // on component mount
  window.addEventListener("keydown", startCar)

  // on component unmount
  return () => {
    window.removeEventListener("keydown", startCar)
  }
}, [])