React Hook "useEffect" 被有条件地调用

Question

React 抱怨下面的代码，说它 useEffect 被有条件地调用：

import React, { useEffect, useState } from 'react'
import VerifiedUserOutlined from '@material-ui/icons/VerifiedUserOutlined'
import withStyles from '@material-ui/core/styles/withStyles'
import firebase from '../firebase'
import { withRouter } from 'react-router-dom'

function Dashboard(props) {
  const { classes } = props
  
  const [quote, setQuote] = useState('')

	if(!firebase.getCurrentUsername()) {
		// not logged in
		alert('Please login first')
		props.history.replace('/login')
		return null
	}

	useEffect(() => {
		firebase.getCurrentUserQuote().then(setQuote)
	})

	return (
		<main>
			// some code here
		</main>
	)

	async function logout() {
		await firebase.logout()
		props.history.push('/')
	}
}

export default withRouter(withStyles(styles)(Dashboard))

这让我返回错误：

  Line 48:  React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render  react-hooks/rules-of-hooks

有谁碰巧知道这里的问题是什么？

Answer 1

您的代码在if包含的语句之后return相当于一个else分支：

if(!firebase.getCurrentUsername()) {
    ...
    return null
} else {
    useEffect(...)
    ...
}

这意味着它是有条件地执行的（仅当未return执行时）。

修理：

useEffect(() => {
  if(firebase.getCurrentUsername()) {
    firebase.getCurrentUserQuote().then(setQuote)
  }
}, [firebase.getCurrentUsername(), firebase.getCurrentUserQuote()])

if(!firebase.getCurrentUsername()) {
  ...
  return null
}

Answer 2

我有一个类似的问题，具有相同的错误消息，其中变量声明的顺序是错误的根源：

坏榜样

if (loading) return <>loading...</>;
if (error) return <>Error! {error.message}</>;

const [reload, setReload] = useState(false);

好例子

const [reload, setReload] = useState(false);

if (loading) return <>loading...</>;
if (error) return <>Error! {error.message}</>;

需要在潜在的条件返回块之前创建钩子

Answer 3

不要在循环、条件或嵌套函数中调用 Hook。相反，始终在 React 函数的顶层使用 Hook。您可以按照此处的文档进行操作。

我在上面的代码中找不到用例。如果您需要在返回值firebase.getCurrentUsername()更改时运行效果，您可能希望在if条件之外使用它，例如：

useEffect(() => {
    firebase.getCurrentUserQuote().then(setQuote)
}, [firebase.getCurrentUsername()]);