Hoe gebruik je de Fetch API in Reactjs?

Fetch API is een moderne interface waarmee je HTTP-verzoeken naar een server kunt maken. Dit is hoe je het kunt gebruiken in Reactjs:

1. Eerst moet je er zeker van zijn dat je je component hebt gerenderd in je rendermethode.

1. Dan, in jouw componentDidMountmethode (of useEffect hook bij functionele components), kun je de fetch functie aanroepen. Deze functie retourneert een promise die, wanneer het is opgelost, je het resultaat als een Response-object geeft.

1. Dit object heeft verschillende methoden om het body van de respons te lezen (als tekst, json, blob, etc.). Deze methoden retourneren ook een belofte die het uiteindelijke resultaat retourneert.

Hier is een eenvoudig voorbeeld van hoe je dit zou doen:

```
class MyComponent extends React.Component { constructor(props) { super(props); this.state = { data: null, } }

componentDidMount() { fetch(‘http://my-api.com/data’) .then(response => response.json()) .then(data => this.setState({ data: data })) .catch(error => console.error(‘Error:’, error)); } render() { return (

// render your data here.

) } } ```

Voor functionele components met de useEffect hook:

```
import React, { useState, useEffect } from ‘react’;

function MyComponent() { const [data, setData] = useState(null);

useEffect(() => { fetch(‘http://my-api.com/data’) .then(response => response.json()) .then(data => setData(data)) .catch(error => console.error(‘Error:’, error)); }, []); // Lege array betekent dat de effect alleen loopt bij het mounten en unmounten. return (

// render your data here.

); }

export default MyComponent;
```

Houd er rekening mee dat echte API-aanroepen asynchroon zijn en je moet omgaan met laadtijden en fouten.