0

Estou tendo um problema com um projeto que estou utilizando React.js, e axios para consumo da API

const [id, setId] = useState('');
const [image, setImage] = useState('');
const [att, setAtt] = useState(0);
const [nameCorrect, setNameCorrect] = useState('');
const [type, setType] = useState([])

useEffect(() => {
    api.get(props.name)
        .then(res => {
            setId(res.data.id);
            setImage(res.data.sprites.front_default);
            setType(res.data.types)            
            setNameCorrect(props
               .name
               .substring(0,1)
               .toUpperCase()
               .concat(props.name.substring(1))
            );
        })

Na linha do setType(res.data.types) basicamente não está guardando a array com os dados na constante type

Esse é o link da api que estou usando, se repararem tem o types dentro do data que estou buscando https://pokeapi.co/api/v2/pokemon/1/

Observação: quando dou um console.log no types ele retorna arrays vazias.

1
  • Depende aonde você está dando console.log em type, se for dentro do useEffect que é executado sem parar nunca vai ver nenhuma atualização.
    – novic
    31/10/2020 às 22:25

1 Resposta 1

1

Fiz um teste no CodeSandbox e aparentemente funcionou, estou presumindo que seu useEffect é executado apenas uma vez, com useEffect(() => {}, []). Note para o [] (array vazio) como segundo parâmetro.

Deixei o método setNameCorrect comentado, pois depende das props de seu componente.

import React, { useEffect, useState } from "react";
import "./styles.css";
import * as api from "axios";

export default function App(props) {
  const [id, setId] = useState("");
  const [image, setImage] = useState("");
  const [att, setAtt] = useState(0);
  const [nameCorrect, setNameCorrect] = useState("");
  const [type, setType] = useState([]);

  useEffect(() => {
api
  .get("https://pokeapi.co/api/v2/pokemon/1/")
  .then(({ data }) => {
    setId(data.id);
    setImage(data.sprites.front_default);

    setType(data.types);

    // setNameCorrect(
    //   props.name.substring(0, 1).toUpperCase().concat(props.name.substring(1))
    // );
  })
  .catch((err) => console.error(err));
  }, []);

  useEffect(() => {
console.log("Type value", type);
  });

  return (
<div className="App">
  <h1>{type && type.length} types</h1>
</div>
  );
}

Adicionei destructuring no retorno da Promise para melhorar a sintaxe, porém o resultado será o mesmo.

2
  • Eu tentei utilizando seu código, copiei igualzinho, mas continua dando problemas, quando eu salvo ele traz as informações, mas assim que dou um F5 ou reinicio o servidor, ele para de trazer o resultado para mim, simplismente me devolve as arrays vazias. Apenas no momento que salvo o código depois de alterado que ele me traz os dados.
    – Vitor
    1/11/2020 às 18:25
  • O que está causando confusão para você é o console.log abaixo da obtenção dos dados. Ele está logando como array vazio, mas na verdade sua view já possui o valor. Não necessariamente no momento em que você realiza o log o setType terminou de ser executado, esta é a sacada de utilizar hooks. Editei minha resposta adicionando um outro hook para assincronamente mostrar o resultado do log e para melhor entendimento. 2/11/2020 às 1:06

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 .