دانلود ویدیو

در این مقاله قصد داریم ساخت درخواست‌های HTTP و دریافت داده‌های API را با استفاده از هوک useEffect در React را بررسی کنیم.

دریافت داده‌ها از یک API، بخشی اساسی در هر برنامه کاربردی SPA است و انجام صحیح آن جهت جلوگیری از به وجود آمدن اشکالاتی که به سادگی قابل تشخیص هستند، بسیار مهم است. خطاهای ریز را به آسانی می‌توان شناخت. مثلاً دریافت داده‌ها هنگامی که دیگر نیازی به آن نیست، ایجاد حلقه‌های نامحدود و … .

در فانکشنال کامپوننت‌ها، اثرات جانبی مانند درخواست‌های HTTP با استفاده از هوک useEffect() ایجاد می‌شوند. اغلب درخواست‌های HTTP پس از اجرای کامپوننت ساخته می‌شوند. اما گاهی اوقات به هنگام تغییر State یا تغییر Props نیز درخواست‌های HTTP ساخته می‌شوند.

در این آموزش قصد داریم درخواستی را در ای پی آی jsonplaceholder برای دریافت یک todo بسازیم.

برای درک این آموزش، شما باید درک اساسی در مورد ایجاد درخواست با استفاده از fetch داشته باشید. علاوه بر این، فرض می‌کنیم که درک کاملی از برخی مفاهیم React دارید.

اول از همه شما باید هوک‌های useEffect و useState را به کامپوننت خود اضافه کنید. هوک useEffect بعداً حاوی کدهایی خواهد بود که درخواست را ایجاد می‌کنند. همین طور از هوک useState برای ذخیره داده‌های دریافت شده در State کامپوننت استفاده می‌شود.

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

حال بیایید درخواست HTTP را با استفاده از ای پی آی jsonplaceholder  بسازیم.

const [todo, setTodo] = useState()

useEffect(() => {
  fetch('https://jsonplaceholder.typicode.com/todos/1')
    .then((response) => response.json())
    .then((data) => setTodo(data))
    .catch((error) => console.log(error.message))
}, [])

کد بالا منجر به ارسال درخواست HTTP در هنگام اجرای کامپوننت می‌شود. درخواست فقط یک بار ارسال می‌شود، زیرا useEffect دارای یک آرایه Dependencies خالی است.

هنگامی که پاسخ تجزیه و تحلیل شد و داده‌ها دریافت شدند، تابع بروزرسانی State، که توسط useState ارائه شده است، برای تنظیم داده‌های دریافت شده به عنوان یک todo جدید استفاده می‌شود.

جلوگیری از Memory Leaks

این کد باعث می‌شود که یک درخواست ساخته شده و یک todo از ای پی آی jsonplaceholder دریافت شود و در نهایت در State کامپوننت ثبت خواهد شد. اما این کد دارای یک نشت حافظه است که مربوط به دریافت داده‌ها نیست. بلکه مربوط به تنظیم داده‌ها در State کامپوننت است.
موردی را تصور کنید که کامپوننت اجرا شده و هوک useEffect قبل از تکمیل درخواست HTTP اجرا می‌شود. در حالی که ارتباط کامپوننت اصلی با DOM برقرار است.

اگرچه کامپوننت ما از DOM جدا نشده است، اما پاسخ درخواست HTTP بازگردانده و تجزیه و تحلیل خواهد شد. تابع setTodo هنوز فراخوانی می‌شود. بنابراین اکنون State کامپوننت بروز می‌شود.

بنابراین‌ به محض فراخوانی تابع setTodo() با خطا مواجه خواهیم شد.

ما از componentWillUnmount استفاده نمی‌کنیم، اما قطعاً مشکل بروزرسانی کامپوننتی را داریم که در حال حاضر نصب نشده است. 

برای رفع این مشکل می‌توانیم مراحل زیر را انجام دهیم:

• در داخل هوک useEffect یک متغیر با مقدار اولیه true یا false تعریف کنیم.
• قبل از فراخوانی تابع  setTodo، برای ذخیره اطلاعات دریافت شده در State، بررسی کنیم که آیا مقدار متغیر تعریف شده در مرحله اول true است یا false. اگر true است، تابع بروزرسانی State را فراخوانی کنیم. در غیر اینصورت لزومی به انجام کاری نیست.
• در داخل تابع cleanup، هوک useEffect، مقدار متغیر را برابر false قرار می‌دهد.

قطعه کد مورد نظر پس از مراحل ذکر شده در بالا به شرح زیر خواهد بود:

useEffect(() => {
  let isActive = true

  fetch('https://jsonplaceholder.typicode.com/todos/1')
    .then((response) => response.json())
    .then((data) => {
      if (isActive) {
        setTodo(data)
      }
    })
    .catch((error) => console.log(error.message))

  return () => {
    isActive = false
  };
}, [])

از آنجا که تابع cleanup مربوط بهuseEffect، هنگام unmount شدن کامپوننت اجرا نمی‌شود، isActive به مقدار false تنظیم خواهد شد. این موضوع مانع از فراخوانی setTodo پس از تکمیل درخواست می‌شود.

[button class=”github-btn” href=”http://frontcast.ir/course/react-redux”]دوره جامع و پیشرفته React و Redux[/button]