-3

Eu tenho esse projetinho pra fazer um clone besta do LinkTree com node, mas estou com um problema chato. A função padrão simplesmente não entra no useEffect, que é onde eu chamo as trees existentes. Por isso, dá erro, dizendo que o array tá undefined.

inserir a descrição da imagem aqui

Aqui é onde mostra os valores...

inserir a descrição da imagem aqui

Simplesmente não entra. Sou iniciante no react, acredito estar realmente faltando alguma coisa, mas não consigo ver o que é. Estou fazendo junto com um amigo, e no dele funcionou certinho.

2 Respostas 2

3

O useEffect é um hook do React que controla o ciclo de vida do componente. Você pode imaginar ele pensando na seguinte metáfora: "React, toda vez que a condição X mudar, repita este código".

A estrutura básica do useEffect é a função anônima e um array contendo as dependências para que esta função seja executada. Caso o array seja vazio o useEffect será chamado quando o componente for renderizado. Por exemplo:

function MeuComponente(){
    useEffect(() => {
        //Faça algo
    }, [])
}

No seu caso você está querendo chamar uma função assíncrona mas o React não permite que ela seja declarada dessa maneira, portanto você terá que criar uma função (dentro da função anônima) se quiser trabalhar com o await nas promises.

function MeuComponente(){
    useEffect(() => {
        async function fazRequisicaoApi(){
            //Faça sua requisição aqui
        }

        fazRequisicaoApi()
    }, [])
}

Uma coisa legal de saber é que usar return dentro do hook fará com que a função retornada seja executada quando o componente for desmontado da tela.

Boa sorte, qualquer coisa estamos aqui para te ajudar :)

2

Existem dois pontos no seu código que acredito ser importantes você corrigir e que provavelmente vão resolver seu problema.

  1. A função passada para o useEffect não deve ser uma função async, o correto seria:
useEffect(() => {
...
}, [])

você pode utilizar o tradicional then e catch para realizar chamadas assíncronas, mas caso vc queira utilizar async/await você pode fazer algo assim:

  useEffect(() => {
    async function fetchMyAPI() {
      let response = await fetch('api/data')
      response = await response.json()
      dataSet(response)
    }

    fetchMyAPI()
  }, [])
  1. o useEffect "deve" receber um segundo parâmetro, esse parâmetro não é obrigatório, mas na maioria dos casos você vai querer declara-lo para evitar execuções desnecessarias. Esse segundo parâmetro é basicamente um array com valores que o react ficará "observando", caso algum desses valores seja alterado o seu useEffect irá executar novamente, normalmente valores como estado ou propriedades passadas para o componente são adicionados nesse array, caso eles estejam sendo utilizados pelo useEffect. Recomendo fortemente que você dê uma olhada nessa sessão da documentação: API de Referência dos Hooks - useEffect

No seu caso você poderia alterar seu useEffect deixando ele dessa forma:

useEffect(() => {
  axios.get('...').then(res => setTrees(res.data)).catch(() => alert("error"))
}, [emailTest])

Outro detalhe importante seria inicializar o seu estado de forma que ele mantenha o tipo de dado que você gostaria de armazenar, por exemplo, suponho que trees seja um array de objetos, para que você não tenha um erro de tipo quando for utilizar o método map, recomendo você alterar a declaração do seu estado deixando ela dessa forma:

const [trees, setTrees] = useState([])

com isso você garante que seu código não vai quebrar enquanto a chamada a api no for finalizada.

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