Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Duvidas para consumir dados de API e exportar para componente JSX

Referente ao curso React: abstraindo seu CSS com Styled Components

por fabio.carvalho
| 26k xp | 2 posts

Ola pessoal, Estou tentando colocar mais um componente similar ao conta que foi criado no curso. Criei o componente JSX dentro de uma Pasta chamada Painel. Depois, criei um arquivo js que busca dados em uma API para ser importado pelo componente JSX. Mas, não consigo fazer com que os dados cheguem até o componente JSX. Será que poderiam me ajudar?

Código do Arquivo .js

export default async function  SearchApi() { 

  const response = await fetch('https://api.bitcointrade.com.br/v3/public/BRLBTC/ticker')
  .then ((resServer) =>{
      return resServer.json();
  });
  return {
    response
  }  
}

Retorno da API

{"code":null,"message":null,"data":{"buy":335000.02,"high":344000,"last":335000,"low":334001.69,"sell":337376.44,"trades_quantity":3219,"volume":29.38633277,"date":"2021-03-31T14:55:34.728Z"}}

Arquivo JSX

import React from "react";
import { Box, Botao } from "../../Components/UI";
import  SearchApi  from "../../Bitcointrade/api";

console.log(
    'Teste de Recebimento do conteudo ' + SearchApi.data
)

const Bitcointrade = () => {
  return (
    <Box>
        <p>Bitcoin</p>
        <p>{SearchApi.data}</p>
      <Botao>Ver Mais</Botao>
    </Box>
  );
};
export default Bitcointrade;

Desde já, Agradeço imensamente quem puder me ajudar, pois já tentei de diversas formas

2 respostas
solução!
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala ai Fabio, tudo bem? Na realidade tu não consegue fazer dessa forma, isso porque a função e os funcionamentos em teoria são um pouco diferente, a ideia seria tu fazer algo assim:

export default async function  SearchApi() { 
    const response = await fetch('https://api.bitcointrade.com.br/v3/public/BRLBTC/ticker')
    return response.json() 
}
const Bitcointrade = () => {
    const [ data, updateData] = React.useState({})

    useEffect(() => {
        SearchApi().then(resposta => updateData(resposta.data))
    }, [])

  return (
    <Box>
        <p>Bitcoin</p>
        <p>{data.buy}</p>
      <Botao>Ver Mais</Botao>
    </Box>
  );
};

Espero ter ajudado.

por fabio.carvalho
| 26k xp | 2 posts

Ajudou demais, Tive apenas que incluir mais = .then() para pegar um nível a mais dentro do Json.

Ficou Show, muito obrigado...