事件监听器和数据获取是 useEffect。

12 浏览
0 Comments

事件监听器和数据获取是 useEffect。

我在使用EventListener和在useEffect钩子中进行数据获取方面遇到了困难。\n我想要实现的是在useEffect中使用getData函数进行一次数据获取，\n同时每次按键时都使用我的EventListener。\n当我尝试下面的代码时，我的EventListener不起作用。但是我的getData函数只会执行一次（这正是我需要的）。\n

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

\n但是当我尝试下面的代码时，我的EventListener起作用，但getData函数会一直执行。这意味着它会一直获取数据，直到我的浏览器崩溃。\n

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

\n以下是另外两个函数：\n

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

\n

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

\n我不知道如何解决这个问题，我阅读了这个类似的问题，但它仍然没有解决我的问题，除非我漏掉了什么。

0

1 答案

0 Comments

Eventlistners and data fetching is useEffect

在React中，我们经常会使用useEffect来处理副作用操作，例如数据获取、事件监听等。然而，在某些情况下，我们可能需要同时处理多个副作用操作，这就涉及到了如何使用多个useEffect的问题。

在给定的代码示例中，我们可以看到有两个useEffect函数，分别用于数据获取和事件监听。第一个useEffect函数用于在组件加载时获取数据，第二个useEffect函数用于在组件加载时添加一个键盘按键事件监听器。

然而，我们也可以看到这两个useEffect函数的依赖项不同。第一个useEffect函数的依赖项是一个空数组，表示它只会在组件加载时执行一次。而第二个useEffect函数没有指定依赖项，这意味着它会在每次组件加载时都执行。

这就引发了一个问题：如何同时处理多个不同的副作用操作，而每个副作用操作又有不同的依赖项？

解决方法是使用多个useEffect函数，并为每个useEffect函数指定不同的依赖项。在给定的代码示例中，我们可以看到第一个useEffect函数的依赖项是一个空数组，这意味着它只会在组件加载时执行一次。而第二个useEffect函数没有指定依赖项，这意味着它会在每次组件加载时都执行。

通过这种方式，我们可以在一个组件中同时处理多个不同的副作用操作，而每个副作用操作又有不同的依赖项。这使得我们能够更好地组织和管理副作用操作，提高代码的可读性和维护性。

总结起来，使用多个useEffect函数可以同时处理多个不同的副作用操作，而每个副作用操作又有不同的依赖项。这样可以更好地组织和管理副作用操作，提高代码的可读性和维护性。

0