在`addEventListener`中处理点击，点击时状态的改变只发生一次。[React Hooks]

在addEventListener中处理点击，点击时状态的改变只发生一次的解决方案是使用React Hooks。React Hooks是React 16.8版本引入的新特性，它使得在函数组件中使用状态和其他React特性变得更加简洁和直观。

首先，我们需要使用useState Hook来声明一个状态变量。状态变量可以存储和跟踪组件中的数据，并且当状态发生改变时，组件会自动重新渲染。

然后，我们可以使用useEffect Hook来监听点击事件，并在点击时改变状态。useEffect Hook接收两个参数，第一个参数是一个回调函数，它会在组件渲染完成后执行，并且可以返回一个清理函数用于取消订阅或清理资源。第二个参数是一个依赖数组，它指定了在什么情况下应该重新执行回调函数。

下面是一个示例代码：

import React, { useState, useEffect } from 'react';

const App = () => {
  const [clicked, setClicked] = useState(false);

  useEffect(() => {
    const handleClick = () => {
      setClicked(true);
      // 可以在这里添加其他处理逻辑
    };

    document.addEventListener('click', handleClick);

    return () => {
      document.removeEventListener('click', handleClick);
    };
  }, []);

  return (
    <div>
      {clicked ? '已点击' : '未点击'}
    </div>
  );
};

export default App;

在上面的例子中，我们在组件中使用useState Hook来声明一个名为clicked的状态变量，并初始化为false。然后，使用useEffect Hook来监听全局的点击事件，并在点击时调用setClicked(true)来改变状态。

需要注意的是，在useEffect的第二个参数中传入一个空数组[]，表示只在组件挂载和卸载时执行一次，不依赖任何其他变量。这样可以保证在点击事件发生时，状态的改变只发生一次。

关于React Hooks的更多信息和使用方法，可以参考腾讯云提供的React Hooks相关文档和教程：

• React Hooks官方文档
• React Hooks简介与实例教程