使用Redux Toolkit搭配MUI ToggleButtonGroup时触发无效Hook调用错误

错误原因 #

你代码里的useDispatch没有作为函数调用，const dispatch = useDispatch;只是把hook本身赋值给了dispatch变量，而不是调用hook获取实际的dispatch函数。这违反了React Hook的调用规则，直接触发了"Invalid hook call"错误。

修复后的代码 #

// 调用useDispatch hook获取dispatch函数
const dispatch = useDispatch();

const handleChange = (event, newAlignment) => {
  dispatch(setNbTasks(newAlignment));
};

额外注意事项 #

• 确保useDispatch是从react-redux正确导入的：

  import { useDispatch } from 'react-redux';
  

• 所有React Hook（包括useDispatch）必须在函数组件的顶层作用域调用，不能在嵌套函数、条件判断或循环中使用。

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