相关疑难解决方法(0)

我正在学习有关如何使用钩子注册事件的Udemy课程，讲师给出了以下代码：

  const [userText, setUserText] = useState('');

  const handleUserKeyPress = event => {
    const { key, keyCode } = event;

    if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
      setUserText(`${userText}${key}`);
    }
  };

  useEffect(() => {
    window.addEventListener('keydown', handleUserKeyPress);

    return () => {
      window.removeEventListener('keydown', handleUserKeyPress);
    };
  });

  return (
    <div>
      <h1>Feel free to type!</h1>
      <blockquote>{userText}</blockquote>
    </div>
  );

现在效果很好，但我不认为这是正确的方法。原因是，如果我理解正确，那么每次重新渲染时，事件都会每次都在注册和注销，而我根本不认为这样做是正确的方法。

所以我useEffect对下面的钩子做了一些修改

useEffect(() => {
  window.addEventListener('keydown', handleUserKeyPress);

  return () => {
    window.removeEventListener('keydown', handleUserKeyPress);
  };
}, []);

通过使用一个空数组作为第二个参数，使组件只运行一次效果，即模仿componentDidMount。当我尝试结果时，奇怪的是，在我键入的每个键上都没有附加，而是被覆盖了。

我期待 …