React Hook "useEffect" est appelé conditionnellement

Question

React se plaint du code ci-dessous, disant que useEffect est appelé conditionnellement:

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))

Et cela me renvoie l'erreur:

  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

Quelqu'un sait-il quel est le problème ici?

Answer 1

Le problème ici est que lorsque nous retournons null à partir de if block, le code de hook useEffect sera inaccessible, car nous l'avons retourné avant, d'où l'erreur qu'il est appelé de façon conditionnelle.

Vous voudrez peut-être d'abord définir tous les crochets, puis commencer à écrire la logique pour le rendu, que ce soit une chaîne vide ou vide, ou un JSX valide.