使用反应上下文 api 从帮助函数显示加载器

Posted 2023-04-14

【中文标题】使用反应上下文 api 从帮助函数显示加载器

【英文标题】：Show loader from a helper function using react context api

【发布时间】：2020-09-12 01:08:19

【问题描述】：

我对 React Context API 还是很陌生。我要做的是在执行 API 调用时设置加载程序，并在 API 调用完成后停止加载程序。但是，如果我从辅助函数执行这些调度操作，则会收到错误消息：

无效的挂钩调用。 Hooks 只能在 a 的主体内部调用 功能组件。这可能发生在以下情况之一 原因： 1. React 和渲染器的版本可能不匹配（例如 React DOM） 2. 你可能违反了 Hooks 规则 解决这个问题。

// ApiCalls.js
export const LoginService = (username, password) => 
  //to show loader when api call starts
    const [dispatch] = useContext(LoaderContext);

    dispatch(
        type: "SHOWLOADER",
        payload: true
    );


// Hello.js
export default function Hello(props) 

  useEffect(() => 
    LoginService();
  , []);

  return(
    <h2>Hello</h2>
  )

Reproducible example.

【问题讨论】：

reactjs.org/warnings/invalid-hook-call-warning.html Reed 这个 Hooks 规则

我知道问题出在哪里，我在哪里做错了......但是我们没有办法触发辅助函数的调度吗？

【参考方案1】：

你有两个错误：

useContext(LoaderContext) 返回一个元组（带有您的实现），因此您需要 setter 函数：

// Not [dispatch]
const [,dispatch] = useContext(LoaderContext);

LoginService 是 actually a custom hook，不应在其他钩子中调用（参见 Rules of hooks）。

import  LoaderContext  from './LoaderContext';
import useContext, useEffect from 'react';

// Use username,password
export const useLoginService = (username, password) => 
  const [, dispatch] = useContext(LoaderContext);

  useEffect(() => 
    dispatch(
      type: "SHOWLOADER",
      payload: true,
    );
  , []);
;

// Usage
export default function Hello(props) 

  useLoginService();

  return(
    <h2>Hello</h2>
  )

见fixed example。

【讨论】：

如果我点击固定示例，它会用到我的旧 stackblitz 代码@dennis

我想我修好了：stackblitz.com/edit/issue-with-context-6xfue1?file=ApiCalls.js

你可以在 stackblitz 中更新你的答案，以使辅助函数在按钮单击时调用...我所做的只是在他单击登录时显示加载器并在返回响应后停止加载器跨度>

虽然不是你问的：stackblitz.com/edit/issue-with-context-6xfue1?file=Hello.js

是的，那是我的错误，我没有以 crct 的方式表达我的问题。非常感谢 :)

【参考方案2】：

你需要这样改变你的组件：

export default function Hello(props) 
  const [state, dispatch] = useContext(LoaderContext);

  useEffect(() => 
    dispatch(
        type: "SHOWLOADER",
        payload: true
    );
  , []);

  return(
    <h2>Hello</h2>
  )