时间戳

首页 > 解决方案 > Eventlistners 和数据获取是 useEffect

javascript - Eventlistners 和数据获取是 useEffect

问题描述

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

我想要实现的是使用 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')
  }

我不知道如何解决这个问题，我已经阅读了这个类似的问题，但它仍然不能解决我的问题，除非我错过了什么

标签： javascriptreactjsreact-hooks

解决方案

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

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

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

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

推荐阅读