带有 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

您不能有条件地调用hook 。 它在文档中说明：

不要在循环、条件或嵌套函数中调用 Hook。 相反，在任何提前返回之前，始终在 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

关于钩子的一个非常重要的规则是你不能将它们放在任何条件中，因为在元素生命周期中执行顺序不能改变。 这意味着您必须在 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

...
}