在Microsoft Teams应用中使用React Hook报错：仅可在函数组件内调用

问题根源 #

你的代码中存在一个直接违反React Hook规则的错误：

// 错误写法：未调用useDispatch Hook
const dispatch = useDispatch;

useDispatch是React-Redux提供的Hook，必须通过**调用它（添加括号）**才能获取到真正的dispatch函数，而你当前只是把Hook本身赋值给了dispatch变量。

修复方案 #

将上述代码修改为：

// 正确写法：调用useDispatch Hook获取dispatch函数
const dispatch = useDispatch();

错误原因解释 #

当你在useEffect回调中执行dispatch(getContractors())时，实际上是在调用useDispatch(getContractors())——也就是在函数组件的主体代码之外（effect回调内部）调用了Hook，这完全违反了React的Hook规则：Hooks只能在函数组件的主体内部调用，因此触发了控制台的错误提示。

修改后，dispatch变量指向的是真正的Redux dispatch函数，在useEffect中调用它就符合规则了。虽然你的代码在普通React项目中可能未触发报错，但Teams的运行环境对Hook规则的检查更为严格，因此暴露了这个问题。

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