reactjs 如何停止useEffect在使用useNavigate时无限运行

rta7y2nd  于 2022-11-04  发布在  React
关注(0)|答案(3)|浏览(178)

我正在做一个电子商店。我有登录用户的uid。我试图做一个条件,如果登录用户的uid不等于管理员的uid,那么我不希望该用户进入管理员页面。useEffect运行无限。

const navigate = useNavigate();
    const user = localStorage.getItem("uid");

    useEffect(() => {

        if (user === 'at64ZIYgqaawRyCAkH6xMYBRNwS2') {
            navigate('/admin')
        }
        else {
            navigate('/home')
        }
    })
zqdjd7g9

zqdjd7g91#

有些事情我希望你能考虑一下。
要检查用户是否为管理员,请不要使用此uid
这可能适用于单一类型的应用程序,但假设有多个管理员试图同时访问应用程序,它将失败!
要比较用户类型,您不应该将if else条件与uid一起使用,而是应该获取一个get Api,它将uid标记作为查询,并从数据库中获取数据,然后比较user_type
一个基本的例子是这样的:前端:

const obj=axios.get("http://localhost:7099")
.then(res=>//..handle response)
.catch(err=>//..handle error)

后端/服务器:
用户对象:

user={
      user_type:"admin" || "default",
      user_name:...,
      user_age:...,
      .
      .
      .
      . 
}

您可以像这样使用UseEffect:

useEffect(() => {

//Todo

}, [])
pcww981p

pcww981p2#

要使用效果不是无限运行:
使用效果(()=〉{
//待办事项
}、[])
您可以将变量状态写入[],也可以不写入。

wlwcrazw

wlwcrazw3#

你应该把dependencies数组添加到useEffect中,这意味着你的钩子应该运行每一个依赖项的变化;因此,如果您只想运行一次,则应向useEffect添加一个空数组:

useEffect(() => {

        if (user === 'at64ZIYgqaawRyCAkH6xMYBRNwS2') {
            navigate('/admin')
        }
        else {
            navigate('/home')
        }
    }, []) // this [] is dependencies array

相关问题