آموزش React مقدماتی قسمت هفتم: State Management

قسمت ها

شما قبلاً یاد گرفته اید که چگونه از prop ها (خصوصیات کامپوننت) برای انتقال داده به کامپوننت ها استفاده کنید. ما برای فرستادن آرایه ای از دوره ها به کامپوننت CoursesList خود از prop ها استفاده کرده ایم. سپس کامپوننت CoursesList برای ارائه خروجی HTML از داده های prop استفاده می کند.

مفهوم دیگر مدیریت داده ها در برنامه React شما State است. تفاوت اصلی با prop ها این است که state مدیریت داده هایی است که برای ارائه نتیجه فقط در یک کامپوننت لازم است. برای هر دو مفهوم، prop و state، داده ها در  plain object های ساده JavaScript ذخیره می شوند.

در این آموزش شما با مدیریت state در React شروع می کنید. ما برای مدیریت داده هایی که توسط کاربر با استفاده از قسمت ورودی جستجو که در قسمت قبل اضافه کرده ایم، از برنامه نمونه استفاده خواهیم کرد و کامپوننت App را با state توسعه می دهیم.

استفاده از state hook برای افزودن state به کامپوننت های functional

بیایید با استفاده از state hook، یک state جدید برای مدیریت داده های متن جستجو در کامپوننت App اضافه کنیم. برای اینکه بتوانید از این hook استفاده کنید بیایید اول بخش import را گسترش دهیم:

import React, {useState} from 'react';

خب اصلا hook ها چی هستند؟ hook ها توابعی هستند که به شما اجازه می دهند که در کامپوننت های تابعی به state و lifecycle در React متصل شوید. hook ها در کلاس ها کار نمی کنند - به شما امکان می دهند بدون کلاس از React استفاده کنید. مفاهیم hook کاملاً در برنامه نمونه ما جای می گیرد زیرا ما تاکنون همه کامپوننت های خود را به عنوان کامپوننت functional پیاده سازی کرده ایم. useState اجازه می دهد که state را به کامپوننت های functional اضافه کنیم.

اجازه دهید تابع useState را در داخل کامپوننت App فراخوانی کنیم:

const App = () => {
  const [searchText, setSearchText] = useState('');
  ...
}

فراخوانی تابع useState یک آرایه را برمی گرداند و ما از نحو destructuring آرایه برای استخراج مقدار state فعلی در یک متغیر استفاده می کنیم که searchText نامیده می شود و یک تابع که برای به روزرسانی مقدار state مورد نیاز است به نام setSearchText.

نحو destructuring آرایه بسیار شبیه نحو object destructuring است که قبلاً در مورد آن یاد گرفته اید. به جای استفاده از curly braces، از براکت برای کشیدن و اختصاص دادن آیتم های آرایه به طور همزمان استفاده می کنید.

تابع useState یک پارامتر می گیرد: مقدار state اولیه. در مثال ما مقدار state اولیه را روی یک رشته خالی تنظیم می کنیم.

تنظیم مقدار state

اکنون ما یک state در کامپوننت ایجاد کرده ایم که می تواند داده های متن جستجو را که توسط کاربر وارد می شود، نگه دارد. برای به روزرسانی مقدار state، هر زمان که کاربر ورودی را تغییر می دهد، ما از تابع handleSearchInputChange استفاده می کنیم تا تابع setSearchText را فراخوانی کرده و مقدار state جدید را ست کنیم:

const handleSearchInputChange = event => {
    setSearchText(event.target.value);
  }

این کد اطمینان حاصل می کند که مقدار state searchText همیشه به روز بوده و با مقدار فیلد ورودی متن مطابقت دارد.

فیلتر کردن آرایه Courses با مقدار state

در مرحله بعدی باید مقدار searchText را برای فیلتر کردن در لیست دوره ها اعمال کنیم. این کار با کد زیر انجام می شود:

const filteredCourses = courses.filter(course => {
    return course.title.includes(searchText) || course.author.includes(searchText);
});

برای ایجاد یک آرایه فیلترشده جدید، ما از تابع filter برای فیلتر کرد آرایه دوره ها استفاده می کنیم و تابعی را ارسال می کنیم که برای هر موردی که باید در آرایه جدید باقی بماند، true for بر میگرداند و برای هر موردی که باید حذف شود، false بر می گرداند.

استفاده از لیست فیلتر شده دوره ها

اکنون باید لیست فیلتر شده دوره ها (filteredCourses) را به کامپوننت CoursesList تحویل دهید تا مطمئن شوید که فقط لیست دوره های فیلتر شده در مرورگر نمایش داده می شود:

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

مجددا، می توانید source code کامل App.js را مشاهده کنید:

در قسمت بعد می خوانید

تاکنون همه کدهایی را که برای نمایش قسمت ورودی جستجو و اجرای منطق جستجوی مربوطه در کامپوننت App لازم است، اضافه کرده ایم. در مرحله بعدی، ما با استخراج کامپوننت search، برنامه خود را بیشتر ساختار می دهیم.

سعید نصیری
سعید نصیری

من برنامه نویس لاراول، PHP و طراح سایت هستم. برنامه نویسی موبایل و تولید اپلیکیشن های موبایل نیز بخش دیگری از توانایی های فردی من هست. تقریبا ده دوازده سالی تجربه مستمر در زمینه طراحی سایت دارم و نزدیک به یک سال هم میشه که در برنامه نویسی موبایل وارد شده ام.

× در حال پاسخ به: