Eventlistners 和数据获取是 useEffect

Question

我正在努力使用 EventListener 和在 useEffect 挂钩中获取数据。

我想要实现的是使用 getData 函数在 useEffect 中获取我的数据一次。 但同时每次我按键时都使用我的 EventListener。

当我尝试下面的代码时，我的 EventListener 将无法工作。但我的 getData 函数只会执行一次（我需要的）

  useEffect(() => {
    getData();

    window.addEventListener('keydown', keyDownHandler);

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

但是当我尝试这段代码时，我的 EventListener 工作但它继续执行 getData 函数。这意味着它只会继续获取数据，直到我的浏览器崩溃

  useEffect(() => {
    getData();

    window.addEventListener('keydown', keyDownHandler);

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

以下是其他 2 个功能：

  const getData =  () => {
    axios.get(`https://myapi`)
      .then((res) => {
       setResults(res.data)
      })
  }

  const keyDownHandler = (e) => {
    if (e.keyCode === 37) console.log('prev')
    else if (e.keyCode === 39) console.log('next')
  }

我不知道如何解决这个问题，我已阅读 this similar question 但它仍然不能解决我的问题，除非我遗漏了什么

Answer 1

您可以使用不同的依赖项执行多个 useEffects。

useEffect(() => {
    getData();
}, []);

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

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