React.js – Fetch useState, useEffect ilə API istifadəsi

React.js veb saytları yaradırken API-lərdən məlumat əldə etmək üçün useState və useEffect funksiyalarından istifadə etmək çox rahatdır. Bu yazıda React.js-də fetch istifadə edərək API-dən məlumat əldə etmək üçün necə useState və useEffect funksiyalarından istifadə edəcəyimizi öyrənəcəyik.

useState və useEffect funksiyalarının əsas funksiyaları

useState və useEffect funksiyaları React.js-ə 16.8 versiyası ilə daxil olmuşdur. Bu funksiyalar component-ə states və side effects əlavə etmək üçün istifadə edilir. useState funksiyası məlumatların saxlanılması və dəyişdirilməsi üçün istifadə edilir. useEffect funksiyası isə component-ə məlumat əlavə etmək və ya çıxarmaq üçün istifadə olunur.

Fetch istifadə edərək API-dən məlumat əldə etmək

fetch metodu ilə API-dən məlumat əldə etmək çox sadədir. Beləliklə, bir react component-də fetch metodu vasitəsilə API-dən məlumat əldə edə bilərik.

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

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

useEffect(() => {
fetch(‘https://api.example.com/data’)
.then(response => response.json())
.then(data => setData(data));
}, []);

return (

);
}

export default App;
“`

Yuxarıdakı kodlarda useState və useEffect funksiyalarından istifadə edərək API-dən məlumat əldə etdik və onu component-ə əlavə etdik. Daha sonra əldə olunan məlumatları map metodu vasitəsilə ekrana çap etdik.

Qonaqlama

React.js-də API istifadəsi üçün fetch, useState və useEffect funksiyalarını istifadə etmək çox effektivdir. Bu funksiyalar sayəsində component-ə states və side effects əlavə etmək və məlumatları idarə etmək çox asandır.