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);
    }
  });

这是另外两个功能：

  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);
    }
});

Eventlistners和数据获取是useEffect

1 个答案: