useDispatch在非组件函数中调用报错，是否需要给函数式子组件传dispatch

• 该报错触发的核心原因是违反了React Hook的调用规则：所有Hook只能在React函数组件或者自定义Hook的最顶层调用，不允许在嵌套的普通函数、循环、条件分支中调用
• 你当前的代码将useDispatch写在了事件回调函数setApprovedDecision内部，不属于组件顶层调用场景，因此触发了ESLint校验报错。

不需要将dispatch从父组件向下传递，你只需要把useDispatch的调用移到ApproveModal组件的顶层即可，修改后代码如下：

import { useDispatch } from "react-redux";

export function ApproveModal(props) {
  // 组件顶层调用useDispatch获取dispatch方法
  const dispatch = useDispatch();
  const setApprovedDecision = () => {
    // 回调中直接调用dispatch提交action即可
    dispatch({ type: SUBMIT_DECISION , payload: props.decisionData});
  };
  return (
    <Button buttonStyle="secondary" onClick={setApprovedDecision}>
    Approve
    </Button>
  );
}

• 只要是符合React函数组件定义的业务子组件，都可以直接在组件顶层调用useDispatch、useSelector等react-redux提供的Hook，不需要额外从父组件透传dispatch，也不会产生额外的性能问题。
• 只有当你需要封装不依赖redux的通用组件时，才考虑将dispatch或者业务回调函数作为props传入组件，正常业务场景直接调用Hook即可。

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