rafaverde / myGithubBlog

A study project developed in the Rocketseat React course that fetches data from the GitHub API to serve a blog.
0 stars 0 forks source link

Realizando requisição HTTP #2

Open rafaverde opened 2 months ago

rafaverde commented 2 months ago

Para fazer a requisição dentro do react, usaremos o promise fetch() para trazer a response do json-server, e em uma função assícrona atualizaremos o estado para conter os dados da nossa api, dessa forma:

... 

interface Transaction {
  id: number
  description: string
  type: "income" | "outcome"
  category: string
  price: number
  createdAt: string
}

export function Transactions() {
  const [transactions, setTransactions] = useState<Transaction[]>([])

  async function loadTransactions() {
    const response = await fetch("http://localhost:3000/transactions")
    const data = await response.json()

    setTransactions(data)
  }

  useEffect(() => {
    loadTransactions()
  }, [])

...

E assim podemos inserir os dados no HTML, mapeando essa resposta e servindo.

rafaverde commented 2 months ago

https://github.com/rafaverde/dtMoney/commit/a0390ab77500b9b65bb70b4a82a6b65f21cea142