Reactjs 获取错误：React Hook“；“使用弹簧”；有条件地称为

当我运行下面的代码时，我得到了这个错误：

React钩子“useSpring”被有条件地调用

有人能帮我解释一下为什么我会得到这个错误吗？任何帮助都将非常感谢，这里我提到了我的代码，我在谷歌上搜索了一下，但没有帮助我，再次提前感谢

import React from "react";
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Redirect,
    withRouter,
    NavLink
  } from "react-router-dom";
import ScrollToTop from "./scrollToTop";
import App from "./App";
import { useAuth0 } from "@auth0/auth0-react";
import {useSpring, animated} from 'react-spring';

const LoginButton = () => {
    const { loginWithRedirect, isAuthenticated, isLoading, error } = useAuth0();
    console.log('isLoading', isLoading, isAuthenticated, error)
    const isAuth = localStorage.getItem('isAuthenticated')
    console.log('isAuth', isAuth)
    if(!isAuth){
        if (isLoading) {
            return <div>Loading...</div>;
          }
    
        if (!isAuthenticated) {
            loginWithRedirect()
        } else {
            localStorage.setItem('isAuthenticated', isAuthenticated)
        }
    }
    const scrolling = useSpring({
      from: { transform: "translate(60%,0)" },
      to: { transform: "translate(-60%,0)" },
      config: { duration: 2000 },
      reset: true
    });
   
    return (   
                        <div>
                            <animated.div style={scrolling}>testing</animated.div>;
                        </div>
    );
};
export default LoginButton;

从“React”导入React；
进口{
BrowserRouter作为路由器，
转换
路线,，
重新使用
用路由器，
导航链接
}从“反应路由器dom”；
从“/ScrollToTop”导入ScrollToTop；
从“/App”导入应用程序；
从“@auth0/auth0”导入{useAuth0}”；
从“react spring”导入{useSpring，动画}；
常量登录按钮=（）=>{
const{loginWithRedirect，isAuthenticated，isLoading，error}=useAuth0（）；
日志（'isLoading'，isLoading，isAuthenticated，error）
const isAuth=localStorage.getItem（'isAuthenticated'）
console.log（'isAuth'，isAuth）
如果（！isAuth）{
如果（孤岛加载）{
返回装载。。。；
}
如果（！已验证）{
loginWithRedirect（）
}否则{
localStorage.setItem（'isAuthenticated'，isAuthenticated）
}
}
const scrolling=useSpring({
from:{transform:“translate（60%，0）”}，
到：{transform:“translate（-60%，0）”}，
配置：{持续时间：2000}，
重置：正确
});
报税表（
测试；
);
};
导出默认登录按钮；

只需交换useSpring和if逻辑的顺序即可

const scrolling = useSpring({
  from: { transform: "translate(60%,0)" },
  to: { transform: "translate(-60%,0)" },
  config: { duration: 2000 },
  reset: true,
});

    if (!isAuth) {
      if (isLoading) {
        return <div>Loading...</div>;
      }
    
      if (!isAuthenticated) {
        loginWithRedirect();
      } else {
        localStorage.setItem("isAuthenticated", isAuthenticated);
      }
    }

const scrolling=useSpring({
from:{transform:“translate（60%，0）”}，
到：{transform:“translate（-60%，0）”}，
配置：{持续时间：2000}，
重置：正确，
});
如果（！isAuth）{
如果（孤岛加载）{
返回装载。。。；
}
如果（！已验证）{
loginWithRedirect（）；
}否则{
setItem（“isAuthenticated”，isAuthenticated）；
}
}

---

因为在您的代码中，如果isAuth为false，它将返回加载。。。并防止useSpring钩子运行，这违反了react钩子原理

只需交换useSpring和if逻辑的顺序即可

const scrolling = useSpring({
  from: { transform: "translate(60%,0)" },
  to: { transform: "translate(-60%,0)" },
  config: { duration: 2000 },
  reset: true,
});

    if (!isAuth) {
      if (isLoading) {
        return <div>Loading...</div>;
      }
    
      if (!isAuthenticated) {
        loginWithRedirect();
      } else {
        localStorage.setItem("isAuthenticated", isAuthenticated);
      }
    }

const scrolling=useSpring({
from:{transform:“translate（60%，0）”}，
到：{transform:“translate（-60%，0）”}，
配置：{持续时间：2000}，
重置：正确，
});
如果（！isAuth）{
如果（孤岛加载）{
返回装载。。。；
}
如果（！已验证）{
loginWithRedirect（）；
}否则{
setItem（“isAuthenticated”，isAuthenticated）；
}
}

---

因为在您的代码中，如果isAuth为false，它将返回加载。。。并防止使用弹簧钩运行，这违反了react-hooks原则

根据react-hooks文档： 钩子的规则是JavaScript函数，但它们附加了两个规则：

只在顶层调用钩子。不要在循环、条件或嵌套函数中调用钩子

仅从React函数组件调用挂钩。不要从常规JavaScript函数调用钩子。（只有一个地方可以调用钩子——您自己的自定义钩子。我们稍后将了解它们。）

您可以阅读更多信息：

不能在

if

语句之后调用钩子。你必须这样做：

import React from "react";
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Redirect,
    withRouter,
    NavLink
  } from "react-router-dom";
import ScrollToTop from "./scrollToTop";
import App from "./App";
import { useAuth0 } from "@auth0/auth0-react";
import {useSpring, animated} from 'react-spring';

const LoginButton = () => {
    const { loginWithRedirect, isAuthenticated, isLoading, error } = useAuth0();
const scrolling = useSpring({
      from: { transform: "translate(60%,0)" },
      to: { transform: "translate(-60%,0)" },
      config: { duration: 2000 },
      reset: true
    });
    console.log('isLoading', isLoading, isAuthenticated, error)
    const isAuth = localStorage.getItem('isAuthenticated')
    console.log('isAuth', isAuth)
    if(!isAuth){
        if (isLoading) {
            return <div>Loading...</div>;
          }
    
        if (!isAuthenticated) {
            loginWithRedirect()
        } else {
            localStorage.setItem('isAuthenticated', isAuthenticated)
        }
    }
    
   
    return (   
                        <div>
                            <animated.div style={scrolling}>testing</animated.div>;
                        </div>
    );
};
export default LoginButton;

从“React”导入React；
进口{
BrowserRouter作为路由器，
转换
路线,，
重新使用
用路由器，
导航链接
}从“反应路由器dom”；
从“/ScrollToTop”导入ScrollToTop；
从“/App”导入应用程序；
从“@auth0/auth0”导入{useAuth0}”；
从“react spring”导入{useSpring，动画}；
常量登录按钮=（）=>{
const{loginWithRedirect，isAuthenticated，isLoading，error}=useAuth0（）；
const scrolling=useSpring({
from:{transform:“translate（60%，0）”}，
到：{transform:“translate（-60%，0）”}，
配置：{持续时间：2000}，
重置：正确
});
日志（'isLoading'，isLoading，isAuthenticated，error）
const isAuth=localStorage.getItem（'isAuthenticated'）
console.log（'isAuth'，isAuth）
如果（！isAuth）{
如果（孤岛加载）{
返回装载。。。；
}
如果（！已验证）{
loginWithRedirect（）
}否则{
localStorage.setItem（'isAuthenticated'，isAuthenticated）
}
}
报税表（
测试；
);
};
导出默认登录按钮；

根据文件： 钩子的规则是JavaScript函数，但它们附加了两个规则：

只在顶层调用钩子。不要在循环、条件或嵌套函数中调用钩子

仅从React函数组件调用挂钩。不要从常规JavaScript函数调用钩子。（只有一个地方可以调用钩子——您自己的自定义钩子。我们稍后将了解它们。）

您可以阅读更多信息：

不能在

if

语句之后调用钩子。你必须这样做：

import React from "react";
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Redirect,
    withRouter,
    NavLink
  } from "react-router-dom";
import ScrollToTop from "./scrollToTop";
import App from "./App";
import { useAuth0 } from "@auth0/auth0-react";
import {useSpring, animated} from 'react-spring';

const LoginButton = () => {
    const { loginWithRedirect, isAuthenticated, isLoading, error } = useAuth0();
const scrolling = useSpring({
      from: { transform: "translate(60%,0)" },
      to: { transform: "translate(-60%,0)" },
      config: { duration: 2000 },
      reset: true
    });
    console.log('isLoading', isLoading, isAuthenticated, error)
    const isAuth = localStorage.getItem('isAuthenticated')
    console.log('isAuth', isAuth)
    if(!isAuth){
        if (isLoading) {
            return <div>Loading...</div>;
          }
    
        if (!isAuthenticated) {
            loginWithRedirect()
        } else {
            localStorage.setItem('isAuthenticated', isAuthenticated)
        }
    }
    
   
    return (   
                        <div>
                            <animated.div style={scrolling}>testing</animated.div>;
                        </div>
    );
};
export default LoginButton;

从“React”导入React；
进口{
BrowserRouter作为路由器，
转换
路线,，
重新使用
用路由器，
导航链接
}从“反应路由器dom”；
从“/ScrollToTop”导入ScrollToTop；
从“/App”导入应用程序；
从“@auth0/auth0”导入{useAuth0}”；
从“react spring”导入{useSpring，动画}；
常量登录按钮=（）=>{
const{loginWithRedirect，isAuthenticated，isLoading，error}=useAuth0（）；
const scrolling=useSpring({
from:{transform:“translate（60%，0）”}，
到：{transform:“translate（-60%，0）”}，
配置：{持续时间：2000}，
重置：正确
});
日志（'isLoading'，isLoading，isAuthenticated，error）
const isAuth=localStorage.getItem（'isAuthenticated'）
console.log（'isAuth'，isAuth）
如果（！isAuth）{
如果（孤岛加载）{
返回