一个useEffect()反应中的三元操作符

Question

我试图只在user不等于''时触发useEffect()钩子。用户登录成功。

现在我不能让它工作-我很感激任何关于如何将三进制与useEffect()结合的建议。谢谢!

const user = useSelector((state) => state.loggedInUser)
user !== ''
? useEffect(() => {
let data = [user.auth0Id, wallet]
api
.updateUserWins(data)
.then((result) => {
console.log(result)
return null
})
.catch((err) => {
console.log(err)
})
}, [wallet])
: console.log('No user')
``

Answer 1

不能有条件地调用钩子。文档中有说明:

不要在循环、条件或嵌套函数中调用Hooks。相反，总是在React函数的顶层，在任何早期返回之前使用Hooks。

相反，你必须将条件运算符移动到传递给useEffect:

的函数中。

useEffect(() => {
if (user !== '') {
let data = [user.auth0Id, wallet]
api
.updateUserWins(data)
.then((result) => {
console.log(result)
return null
})
.catch((err) => {
console.log(err)
});
}
else {
console.log('No user')
}
}, [wallet, user])

如果您愿意，当然可以使用条件操作符?:而不是if。

Answer 2

关于钩子的一个非常重要的规则是你不能把它们放在任何条件中，因为在元素生命周期中执行的顺序不能改变。这意味着你必须将condition移到useEffect中，就像这样:

useEffect(() => {
if(user !== ''){ // AND HERE YOU PUT CONDITION
let data = [user.auth0Id, wallet]
api
.updateUserWins(data)
.then((result) => {
console.log(result)
return null
})
.catch((err) => {
console.log(err)
})
}
}, [wallet, user])

Answer 3

我不认为这是一个好主意触发useEffect只有条件。最好在useEffect的中执行条件检查，看看是否有需要更改的地方。

例如:

function MyComponent({user, wallet}) {
useEffect(() => {
if (!user) {
return; // Either return nothing, or a cleanup function if you have one.
}
let data = [user.auth0Id, wallet]
// ...rest of your logic
}, [wallet, user]) // add user to your dependency array
...
}