Question

我遇到一个问题，即调用Context的默认值，而不是Provider内部的函数。

由于Typescript的原因，它需要一个定义，而undefined并不是理想的解决方案。

interface ContextProps {
  error: ApiError | null;
  errorUI: React.ReactElement | null;
  handleError: (value: ApiError | null) => void;
}

export const ErrorContext = React.createContext<ContextProps>({
  error: null,
  handleError: (_err: ApiError | null) => { console.log('hi'); }, // <<-- this function gets triggered, not the one inside the Provider
});

const ErrorProvider: FC = ({ children }) => {
  const [error, setError] = useState<ApiError | null>(null);
  const handleError = (err: ApiError) => setError(err);
  return (
    <ErrorContext.Provider value={{ error, handleError }}>
      {children}
    </ErrorContext.Provider>
  );
}
// HOOK:
const useDisplayError = () => {
  const { handleError } = useContext(ErrorContext);
  return useCallback(
    (error) => {
      handleError(error);
    },
    [handleError]
  );
};

以下是该应用的布局方式：

ReactDOM.render(
  <Router history={history}>
    <AppProviders>
      <App />
    </AppProviders>
  </Router>,
document.getElementById('root'));

const AppProviders: FC = ({ children }) => {
  return (
    <AuthProvider>
      <ThemeProvider theme={theme}>
        <GlobalStyle />
        <LoadingProvider>
          <ErrorProvider>{children}</ErrorProvider>
        </LoadingProvider>
      </ThemeProvider>
    </AuthProvider>
  );
};

const App: FC = () => {
  const { token } = useAuth();

  return token ? <Authenticated /> : <Unauthenticated />;
};

const Unauthenticated: FC = () => {
  return <Login />;
};

//消耗组件的钩子

const Login: FC = () => {
  const { login } = useAuth();
  const displayError = useDisplayError();

const handleSubmit = (event: MouseEvent) => {
    event.preventDefault();
    setStatus(Status.LOADING);
    try {
      login({ email, password });
    } catch (e) {
      displayError(e); // hook gets called here
    }
  };
return <div />
};

钩子handleError中的函数已从钩子本身的使用组件中正确调用。但是，被调用的handleError从createContext映射回该函数的版本，而不是提供程序本身内部的函数。

因此，将调用console.log而不是从提供者内部更新状态所需的操作。为什么会这样？

Answer 1

如果上下文不起作用，请检查提供商的顺序！

此命令有效：

    const AppProviders: FC = ({ children }) => {
  return (
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      <LoadingProvider>
        <ErrorProvider>
          <AuthProvider>{children}</AuthProvider>
        </ErrorProvider>
      </LoadingProvider>
    </ThemeProvider>
  );
};

上下文的提供程序默认值函数被调用，而不是提供程序内部的函数

1 个答案: