在 useEffect 中使用 useReducer 的调度 - React

Question

在反应中，我试图在 useEffect 中第一次渲染时执行 GET 请求，然后发送响应以更新 useReducer 状态。

代码如下：

   const [{ firstTime, typeOfDev, technologies }, dispatch] = useReducer(
      typeOfDevReducer,
      initialState
   );

   useEffect(() => {
      const getTypeOfDev = async () => {
         try {
            const typeOfDev = (await axiosPrivate.get<ITypeOfDev>(`type-of-dev/get/${user!.id}`))
               .data;
            dispatch({
               type: REDUCER_ACTION_TYPE.GET_USER,
               payload: { value: typeOfDev },
            });
           ^^^^^^^^^^^^^ Here is the error
         } catch (err: any) {
            if (err.response?.status === 404)
               dispatch({ type: REDUCER_ACTION_TYPE.SET_FIRST_TIME });
         } finally {
            dispatchRedux(setObjectValueChanged(false));
         }
      };

      getTypeOfDev();
   }, [axiosPrivate, user]);

这是我的减速器的开始：

export default (state: IInitState, action: reducerAction): IInitState => {
   const dispatch = useAppDispatch();
   dispatch(setObjectValueChanged(true));

   switch (action.type) {
      case REDUCER_ACTION_TYPE.GET_USER: {
         console.log(action.payload);
         return { ...state, typeOfDev: { ...action.payload!.value } };
      }

但是我有一个错误的反应说：不要在 useEffect(...)、useMemo(...) 或其他内置 Hooks 中调用 Hooks...并且 React 检测到DeveloperType 调用的 Hooks 顺序....

我知道 dispatch 是一个反应钩子，不应该用于副作用，但是这个问题有解决方法吗？

Answer 1

问题是您在 reducer 函数内部调用

useAppDispatch

（我假设它是一个钩子）。钩子只能在组件渲染函数的根级别调用。