Hämta data (klientkomponent)

Hämta och visa data

• Vi kommer nu titta närmare på useState och useEffect som vi behöver för att kunna hämta och visa data.
• För att hämta data använder vi funktionen fetch som finns inbyggd i webbläsaren

const response = await fetch('https://www.api.com/data');
const data = await response.json();
console.log(data);

useState

• När vi väl har hämtat datan vill vi visa den i vår komponent
• Med hjälp av useState kan vi skapa en variabel som vi kan använda för att visa datan

const [count, setCount] = useState(0);

• count är variabeln som vi kan använda för att visa datan
• setCount är funktionen vi använder för att uppdatera datan
• 0 är värdet som count får från början

useEffect

• Kod i en komponent körs varje gång komponenten renderas vilket sker när vi uppdaterar statet
• För att förhindra en oändlig loop av api-anrop måste vi lägga fetch-koden i useEffect

useEffect - Dependency array

useEffect(() => {
  //kod som körs när komponenten renderas
, []);

• Med hjälp av dependency array kan vi bestämma när useEffect ska köras
• Antingen hämtar vi bara data när komponenten renderas första gången
• Har vi någon typ av filtrering eller sökning kan vi lägga till variabler i arrayen som useEffect ska lyssna på

Komplett exempel ladda och visa data

import React, { useState, useEffect } from 'react';

const App = () => {
  const [data, setData] = useState(0);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://www.api.com/data');
      const data = await response.json();
      setData(data);
    };
    fetchData();
  }, []);

  return (
    <div>
      <p>{data}</p>
    </div>
  );
};

Övning 1 - Hämta och visa data

Typning av data

• Vi kan använda Typescript för att typa datan som vi hämtar
• Genom att skapa en type kan vi ange vilken typ av data vi förväntar oss

type CatFact = {
  fact: string;
  length: number;
};

const getProducts = async () => {
  const response = await fetch('https://catfact.ninja/fact');
  const data = await response.json();
  return data as CatFact;
};

Övning 2 - Sortera om data med nytt anrop