React useEffect钩子事件侦听器触发了两次

是因为在函数组件中使用了useEffect钩子，并且没有指定依赖项数组。当没有指定依赖项数组时，useEffect会在每次组件渲染时都执行。

解决这个问题的方法是通过指定依赖项数组来控制useEffect的触发时机。依赖项数组是一个包含了所有需要被监听的变量的数组。只有当依赖项数组中的变量发生变化时，useEffect才会被触发。

例如，如果只想在组件挂载时执行一次useEffect，可以将依赖项数组设置为空数组：

useEffect(() => {
  // 在组件挂载时执行的代码
}, []);

如果想要在特定变量发生变化时执行useEffect，可以将该变量添加到依赖项数组中：

const [count, setCount] = useState(0);

useEffect(() => {
  // 在count发生变化时执行的代码
}, [count]);

此外，还可以使用useEffect的返回函数来进行清理操作。返回函数会在组件卸载时执行，或者在依赖项发生变化之前执行。

useEffect(() => {
  // 在组件挂载时执行的代码

  return () => {
    // 在组件卸载时执行的清理操作
  };
}, []);

总结：

• React的useEffect钩子用于在函数组件中执行副作用操作。
• 如果没有指定依赖项数组，useEffect会在每次组件渲染时都执行。
• 通过指定依赖项数组，可以控制useEffect的触发时机。
• 可以使用返回函数进行清理操作。
• 更多关于React useEffect的信息和使用方法，可以参考腾讯云的React文档：React useEffect