Javascript 如何在组件中使用react useRef

我试图使用上下文来允许所有组件都可以使用身份验证状态。然而，我被这个错误难住了

错误：无效的钩子调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一：

React和渲染器的版本可能不匹配（例如React DOM）

你可能违反了钩子的规则

同一应用程序中可能有多个React副本 有关如何调试和修复此问题的提示，请参阅

src/utils/hooks.js:22
19 |/}，[口袋妖怪，快跑]）
20 | const defaultInitialState={状态：“空闲”，数据：null，错误：null}；
21 |函数UseAncy（初始状态）{
>22 | const initialStateRef=useRef({
23 |…默认初始状态，
24 |…初始状态
25 |   });```
使用ProvideAuth
src/components/helper/context.js:28
25 | 
26 | 
27 |功能使用提供授权（道具）{
>28 |常数{
29 |数据：用户，
30 |地位，
31 |错误，
手推
src/components/login/login-form/index.js:13
10 |功能手柄提交（事件）{
11 | event.preventDefault（）；
12 | const{email，password}=event.target.elements；
>13 |运行(
|^14 |提交({
15 | email:email.value，
16 |密码：password.value
Index.js
,
ProvideAuth
函数ProvideAuth（{children}）{
返回(
{儿童}
);
}
使用ProvideAuth
函数UseProvideAuth（道具）{
常数{
数据：用户，
地位
错误，
孤岛，
伊西德尔，
伊瑟罗，
发行成功，
跑
设置数据
}=useAsync（）；
使用异步
constDefaultInitialState={状态：“空闲”，数据：null，错误：null}；
函数UseAncy（初始状态）{
const initialStateRef=useRef({
…默认初始状态，
…初始状态
});
以下是[codesandbox][1]上的最低设置
任何帮助都将不胜感激。
[1]: https://codesandbox.io/s/frosty-silence-b0c8i

请设置一个最小的可复制示例。您的问题在这里有答案。@CharchitKapoor，这里是指向特定DOM元素的最小设置引用点。它们只能在react组件中使用，并且在使用之前被分配给DOM元素。它们不能设置为true或false。自定义挂钩的概念是def在我试图遵循的正式文档（）中定义。这应该允许我在函数中使用钩子。在使用DOM元素之前，useRef指向DOM元素，我并没有从文档中获得该视图。这只是一个常见的用例

src/utils/hooks.js:22
  19 | // }, [pokemonName, run])
  20 | const defaultInitialState = { status: "idle", data: null, error: null };
  21 | function useAsync(initialState) {
> 22 |   const initialStateRef = useRef({
  23 |     ...defaultInitialState,
  24 |     ...initialState
  25 |   });```

    UseProvideAuth
src/components/helper/context.js:28
  25 | 
  26 | 
  27 | function UseProvideAuth(props) {
> 28 |   const {
  29 |     data: user,
  30 |     status,
  31 |     error,

    handleSubmit
src/components/login/login-form/index.js:13
  10 | function handleSubmit(event) {
  11 |   event.preventDefault();
  12 |   const { email, password } = event.target.elements;
> 13 |   run(
     | ^  14 |     onSubmit({
  15 |       email: email.value,
  16 |       password: password.value

Index.js

  <React.StrictMode>
    <ProvideAuth>
        <App />
    </ProvideAuth>
  </React.StrictMode>,

ProvideAuth

function ProvideAuth({ children }) {
  return (
    <BrowserRouter>
      <authContext.Provider value={UseProvideAuth}>{children}</authContext.Provider>
    </BrowserRouter>
  );
}

UseProvideAuth

    function UseProvideAuth(props) {
  const {
    data: user,
    status,
    error,
    isLoading,
    isIdle,
    isError,
    isSuccess,
    run,
    setData
  } = useAsync();


useAsync

const defaultInitialState = { status: "idle", data: null, error: null };
function useAsync(initialState) {
  const initialStateRef = useRef({
    ...defaultInitialState,
    ...initialState
  });

Here is a minimal setup on [codesandbox][1] 
Any help would be appreciated.


  [1]: https://codesandbox.io/s/frosty-silence-b0c8i