React如何实现useEffect调用函数同时支持按钮点击按需触发

解决步骤 #

1. useCallback依赖数组的正确配置 #

你当前写的空依赖数组是合法的。
getBtStatus内部用到的外部依赖中：

• BleClient是全局导入的SDK，引用不会发生变化
• setIsBtEnabled、setMessage都是useState返回的状态更新函数，React官方保证它们的引用永久稳定，不会随组件重渲染变化
• catchError如果是组件外定义的工具函数，或者是已经用useCallback缓存过的组件内函数，也属于稳定依赖
  因此你不需要在useCallback的依赖数组里新增任何内容，现有写法是正确的。

2. 排查点击重置按钮不触发getBtStatus的问题 #

useCallback只会缓存函数引用，不会阻止你手动调用函数，点击没触发和useCallback本身无关，优先排查以下几个点：

• 检查重置按钮的onClick是否正确绑定了reset函数，不要写成onClick={reset()}这种立即执行的形式
• 在reset函数的getBtStatus()调用前加一行日志，确认try块的代码有没有执行到getBtStatus这一行：如果前面的await BleClient.initialize()或者其他操作抛出异常，代码会直接进入catch块，不会执行getBtStatus
• 如果是执行了getBtStatus但状态没更新，检查setIsBtEnabled、setMessage对应的状态是否正确声明，有没有拼写错误

3. 更简单的useEffect警告处理方案 #

如果你只需要页面首次渲染时执行一次getBtStatus，完全可以不用折腾useCallback，直接加eslint注释跳过依赖警告即可，属于合理的使用场景：

useEffect(() => {
  getBtStatus();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])

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