派遣未定义。 \"notifContext.dispatch 不是函数。\"

Question

我有一个 context.js 文件：

import React, {useReducer} from 'react';

export default (reducer, actions, defaultValue) => {
  const Context = React.createContext();

  const Provider = ({children}) => {
    const [state, dispatch] = useReducer(reducer, defaultValue);

    const boundActions = {};
    for (let key in actions) {
      boundActions[key] = actions[key](dispatch);
    }

    return (
      <Context.Provider
        value={{
          state,
          ...boundActions,
        }}>
        {children}
      </Context.Provider>
    );
  };
  return {Context, Provider};
};

然后我有一个 notifContext.js 文件，它将 reducer 和函数传递给上下文文件：

const defaultValue = {
  errorMessage: '',
  notifCount: [0],
  notifications: [],
};

const notifReducer = (state, action) => {
  switch (action.type) {
    case 'error_1':
      return {
        ...state,
        errorMessage: action.payload,
      };
    case 'clear_error_message':
      return {
        ...state,
        errorMessage: '',
      };
  }
};

export const {Provider, Context} = context(
  notifReducer,
  {
    some functions,
    ...
  },
  defaultValue,
);

在我的通知屏幕中，我想听听错误。我能够分派错误但是当它在 useeffect 中到达 onHidden 时，我得到：

 ERROR  TypeError: notifContext.dispatch is not a function. (In 'notifContext.dispatch({
              type: 'clear_error_message'
            })', 'notifContext.dispatch' is undefined)

我的通知屏幕我用 useEffect 监听错误：

import {Context as NotifContext} from '../../context/NotifContext';

const [notifContext] = useContext(NotifContext);

  useEffect(() => {
    if (notifContext?.state?.errorMessage) {
      setToast(
        Toast.show(notifContext?.state?.errorMessage, {
          duration: Toast.durations.SHORT,
          position: Toast.positions.CENTER,
          onHidden: () => notifContext?.dispatch({type: 'clear_error_message'}),
        }),
      );
    } else if (toast) {
      Toast.hide(toast);
    }
  }, [notifContext?.state?.errorMessage]);

应用程序.js：

export default () => {
  return (
    <AuthProvider>
      <NotifProvider>
        <NavigationContainer ref={navigationRef}>
          <App />
        </NavigationContainer>
      </NotifProvider>
    </AuthProvider>
  );
};

Answer 1

报错提示dispatch is not a function on notifContext，这说明notifContext没有dispatch函数。查看您的 notifContext.js 文件，您似乎正在从 context.js 文件中导出 Provider 和 Context。要解决此问题，您需要导入 Provider 并将您的 Notifications 组件包装在 Provider 组件中以提供对调度功能的访问。

import React, {useContext, useEffect, useState} from 'react';
import {Context as NotifContext, Provider as NotifProvider} from '../../context/NotifContext';
import Toast from 'react-native-root-toast';

const Notifications = () => {
  const [toast, setToast] = useState(null);
  const {state, dispatch} = useContext(NotifContext);

  useEffect(() => {
    if (state?.errorMessage) {
      setToast(
        Toast.show(state?.errorMessage, {
          duration: Toast.durations.SHORT,
          position: Toast.positions.CENTER,
          onHidden: () => dispatch({type: 'clear_error_message'}),
        }),
      );
    } else if (toast) {
      Toast.hide(toast);
    }
  }, [state?.errorMessage]);

  return null; // return your actual UI here
};

const NotificationsWithContext = () => {
  return (
    <NotifProvider>
      <Notifications />
    </NotifProvider>
  );
};

export default NotificationsWithContext;