能否在onClick绑定函数中调用useEffect？违反Hook规则报错如何解决？

错误原因 #

React Hook 有强制调用规则：只能在函数组件或自定义 Hook 的顶层作用域调用，禁止在事件回调、普通嵌套函数、条件分支、循环内调用。你将useEffect写在点击事件触发的test函数内部，属于嵌套函数内调用Hook，违反规则所以触发报错。
错误代码如下：

const test = () => {
   useEffect(() => {
      setState("test")
}, [testDependency])
}   
<button onClick={() => Test()}>btn</button>

解决方案 #

根据实际开发需求对应调整即可：

场景1：点击按钮后直接执行更新逻辑，不需要依赖监听

直接删除useEffect，把业务逻辑写到事件回调中：

// 组件顶层定义点击逻辑
const test = () => {
  setState("test")
}

// 绑定点击事件
<button onClick={test}>btn</button>

场景2：需要同时响应点击动作和testDependency的变更才执行逻辑

将useEffect挪到组件顶层，新增点击状态标记控制逻辑触发：

// 组件顶层新增点击状态标记
const [isBtnClicked, setIsBtnClicked] = useState(false)

// 组件顶层调用useEffect，监听所有依赖项
useEffect(() => {
  if (isBtnClicked) {
    setState("test")
    // 执行后重置标记，避免重复触发
    setIsBtnClicked(false)
  }
}, [isBtnClicked, testDependency])

// 点击事件仅修改触发标记
const test = () => {
  setIsBtnClicked(true)
}

<button onClick={test}>btn</button>

内容的提问来源于stack exchange，提问作者BarakOren