错误消息的开头为:
未捕获错误:无效的钩子调用.钩子只能在函数组件的主体内部调用.
在我try 使用调度程序更新Redux状态之前，handleChange函数运行得没有错误.
这样做效果很好:
const [alignment, setAlignment] = React.useState('12');
const handleChange = (event, newAlignment) => {
setAlignment(newAlignment);
};
但我想把国家提升到Redux-Toolkit.按如下方式更改函数会导致错误:
const dispatch = useDispatch;
const handleChange = (event, newAlignment) => {
dispatch(setNbTasks(newAlignment));
};
我试了几种方法，但一无所获，细节在上面.
您将useDispatch钩子保存到名为dispatch的变量，然后从回调函数调用钩子函数，这会打破Rules of Hooks.
仅在顶层调用挂钩
Don’t call Hooks inside loops, conditions, or nested functions.相反，始终在React函数的顶层使用Hooks， 在任何早期回归之前.通过遵循此规则，您可以确保 每次组件呈现时，都以相同的顺序调用钩子. 这就是为什么React能够正确地保持Hooks的状态
useState和useEffect之间的联系
const dispatch = useDispatch; // dispatch === useDispatch -> true
const handleChange = (event, newAlignment) => {
dispatch(setNbTasks(newAlignment)); // -> useDispatch(....); 😞
};
应该首先调用useDispatch钩子，并将returned调度函数保存到局部变量dispatch.
const dispatch = useDispatch(); // Invoke hook, get dispatch function
const handleChange = (event, newAlignment) => {
dispatch(setNbTasks(newAlignment)); // Ok dispatch call now 😀
};