1

Estou aprendendo a usar o UseEffect e me deparei com um looping infinito na minha requisição(fetch). Pelo o que entendi, o meu useEffect apenas era para ser chamado quando a variável "user" fosse atualizada. E ela só é atualizada quando eu clico no meu botão "Pesquisar", por isso não entendi o porque do looping. Alias o Looping só acontece no carregamento da página.

import { useState, useEffect } from 'react'
import '../styles/components/content.sass'

const Content = () => {
    const [getUser, setGetUser] = useState('')
    const [user, setUser] = useState('')
    
    const getInputUser = () => {
        setUser(getUser)
    }
    
    useEffect(() => {
        fetch(`https://api.github.com/users/PinheiroMatheus`)
            .then((res) => res.json())
            .then((json) => setUser(json))
        console.log(user)
    }, [user])

    return (
        <div className='content'>
            <div className="main-content">
                <div className="title">
                    Consulte um perfil do Github!
                </div>
                <div className="result">
                    <img src={user.avatar_url} alt="Foto perfil" />
                    <span>Nome: {user.name}</span>
                    <span>Localização: {user.location}</span>
                </div>
                <div className="info-name">
                    <span>Digite o nome de usuário</span>
                    <input
                        type="text"
                        onChange={(e) => setGetUser(e.target.value)}
                        placeholder='PinheiroMatheus' />
                </div>
                <div className="action-buttons">
                    <button className='search' onClick={getInputUser} >Pesquisar</button>
                    <button className='clean'>Limpar</button>
                </div>
            </div>
        </div>
    )
}

export default Content

2 Respostas 2

-2

Para quem estiver interessado, consegui encontrar a solução, aqui vai...

O looping ocorria porque o meu useEffect era chamado sempre que o meu "User" era alterado, mas no meu fetch, dentro do próprio useEffect eu alterava o "User" usando a linha ".then((json) => setUser(json))".

Para concertar, eu criei mais um useState que vai receber as informações do usuário do Github. Não sei se foi a melhor forma, mas como eu disse, ainda estou aprendendo e dessa forma deu certo.

´´´

import { useState, useEffect } from 'react'
import '../styles/components/content.sass'

const Content = () => {
    const [getUser, setGetUser] = useState('')
    const [user, setUser] = useState('')
    const [gitUser, setGitUser] = useState('')
    
    const getInputUser = () => {
        setUser(getUser)
    }
    
    useEffect(() => {
        fetch(`https://api.github.com/users/${user}`)
            .then((res) => res.json())
            .then((json) => setGitUser(json))
    }, [user])

    return (
        <div className='content'>
            <div className="main-content">
                <div className="title">
                    Consulte um perfil do Github!
                </div>
                <div className="result">
                    <img src={gitUser.avatar_url} alt="Foto perfil" />
                    <span>Nome: {gitUser.name}</span>
                    <span>Localização: {gitUser.location}</span>
                </div>
                <div className="info-name">
                    <span>Digite o nome de usuário</span>
                    <input
                        type="text"
                        onChange={(e) => setGetUser(e.target.value)}
                        placeholder='PinheiroMatheus' />
                </div>
                <div className="action-buttons">
                    <button className='search' onClick={getInputUser}>Pesquisar</button>
                    <button className='clean'>Limpar</button>
                </div>
            </div>
        </div>
    )
}

export default Content

´´´

-3

Olá, tudo bem? . O que está acontecendo é que você está passando como dependência da função, o [user], ele mesmo como instrução da função onde você coloca console.log(user). Isso que causa o loop infinito. Retira o [user] do array de dependência e ser se o resultado lhe atende

2
  • Muito obrigado pela dica. Mas se eu retirar o user, o meu useEffect vai rodar no carregamento da página. Este meu projeto é para que o usuário coloque um nome em um input, e quando clicar em Pesquisar, deve buscar na API do Github o usuário informado. Commented 3/11/2022 às 22:34
  • Então nesse caso você não precisa do useEffect. Você pode declarar essa função normal. E usar o evento onClick para sempre que o usuário clicar pegar o valor do input e disparar essa função. Commented 5/11/2022 às 10:08

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .