دسترسی به State مستقیما بعد از تعریف آن در React



visibility  
mode_comment   ۰

دسترسی به State مستقیما بعد از تعریف آن در React

در این مطلب یاد میگیریم که نحوه دسترسی به State مستقیما بعد از تعریف آن در React به چه صورت انجام میشه و چطوری میتونیم setState که بصورت Async عمل میکنه رو مدیریت کنیم.

اگر با React کار کرده باشید به احتمال زیاد براتون پیش اومده که بخواید یک چیزی رو در State مقداردهی کنید و بعد از اون از چیزی که درون State قرار دادید، استفاده کنید. از اونجایی که setState بصورت Async عمل میکنه، مدت زمانی طول میکشه تا state مورد نظرتون اعمال بشه و بهمین خاطر نمیتونین به راحتی دسترسی به state بروز شده داشته باشید.

شبیه‌سازی مشکل

فرض کنید که طی شرایط خاص چیزی رو در State قرار بدیم و بخوایم بصورت مستقیم و Synchronous به اون دسترسی داشته باشیم. بصورت زیر:

یک Component بنام App ساختیم و در ابتدا یک Object خالی رو برای ویژگی clickCounts در State قرار دادیم. در render تعداد 3 دکمه رو با id های 1 و 2 و 3 قرار دادیم و برای همه اونا onClick تعریف کردیم و زمانی که بر روی اونا کلیک میشه، متد onClick فراخوانی میشه و کدهای درون اون اجرا میشه.

در متد onClick بررسی میشه که بر روی کدام دکمه کلیک شده و یکی به تعداد کلیکهای مربوط به اون دکمه اضافه میکنه و Object بروز شده رو مجددا با استفاده از setState در State قرار میده. همونطور که میبینید بعد از setState مستقیما از console.log استفاده کردیم و مقدار this.state.clickCounts رو درون Console چاپ کردیم.

more  بیشتر بخوانید : ترفندهای پیشرفته jQuery (قسمت 31)

اما اگر خروجی رو ببینیم متوجه میشیم که چیزی که در Console چاپ میشه مقدار بروز شده State نیست حتی با وجود اینکه Console.log رو بعد از setState قرار دادیم. این مشکل بخاطر Async بودن setState پیش میاد و در ادامه راه‌حل‌هایی برای حل این مشکل رو در اختیارتون قرار میدیم.

استفاده از setTimeout (این راه‌حل پیشنهاد نمیشه)

متخصص وردپرس
قالب ها و پلاگین های حرفه ای وردپرس رو خودت بنویس! بازار طراحی قالب و پلاگین نویسی وردپرس به شدت داغه و اگر بلد باشید با برنامه نویسی اختصاصی، قالب ها و پلاگین های دلخواه بنویسید تو مارکت های مطرح دنیا و یا از طریق فریلنسری می تونید به درآمد بالا برید. دوره متخصص وردپرس سون لرن رو حتما ببینید: متخصص وردپرس arrow_back

چون SetState یک عملیات هست، شما میتونین منتظر بمونین تا کارش تموم بشه و بعد از اون استفاده کنید. شما میتونین با استفاده از setTimeout برای مدت زمان مشخصی منتظر بمونین. مثلا کد زیر رو ببینید:

همونطور که میبینید یک setTimeout قرار دادیم و بعد از 100 میلی‌ثانیه this.state.clickCounts رو در Console چاپ کردیم. اگر کد بالا رو اجرا کنید متوجه میشید که یک ارور وجود داره و نمیتونین در setTimeout به ویژگی‌های رویداد مثل e.target.name دسترسی داشته باشید.

کلا بصورت پیش فرض نمیتونین بصورت Async (مثلا در setTimeout) به ویژگی‌های event دسترسی داشته باشید. اما اگر بخواید این کار رو بکنید میتونین متد persist رو فراخوانی کنید تا بتونین بصورت Async هم به ویژگی‌های رویداد دسترسی داشته باشید. بصورت زیر:

more  بیشتر بخوانید : ترفندهای پیشرفته jQuery (قسمت 41)

حالا اگر بر روی دکمه‌ها کلیک کنید خواهید دید که مقدار بروز شده State در Console چاپ میشه و این همون چیزی هست که ما دنبالش بودیم. ولی اگر دقت کنید این روش خیلی اطمینان‌بخش نیست و امکان داره که در 100 میلی‌ثانیه کار مورد نظر انجام نشه و شما باید دعا کنید که این زمان برای انجام کار مورد نظر کافی باشه.

پس این روش رو پیشنهاد نمیکنم. برای مطاالعه بیشتر در مورد persist که در بالا استفاده شد، میتونین به Event pooling مراجعه کنید.

در ادامه 2 روش پیشنهاد شده توسط خود React رو بهتون معرفی میکنم که میتونین از اونا در دنیای واقعی استفاده کنید.

استفاده از Callback در setState

نحوه استفاده از setState بصورت زیر هست:

همونطور که میبینید در ابتدا یک object رو قرار میدید که چیزایی که در State هست رو بروزرسانی کنید و بعد از اون هم میتونین یک callack بصورت optional یا دلخواه قرار بدین. callback زمانی اجرا میشه که setState بصورت کامل انجام شده و شما در Callback میتونین به مقدار بروز شده state دسترسی داشته باشید. بصورت زیر:

اگر کد بالا رو اجرا کنید باز هم نتیجه مورد مطلوب رو در Console میبینید.

استفاده از componentDidUpdate

مستندات React بیشتر استفاده از این روش رو پیشنهاد میکنه. برای این روش کدهای زیر رو قرار میدیم:

اگر کدها رو اجرا کنید، باز هم اون چیزی که هدفتون بوده در Console چاپ میشه.

اما بنظر من بهتره که از همون روش دوم یعنی استفاده از Callback استفاده کنید چون هم راحتتر هست و پیچیدگی‌های ComponentDidUpdate رو هم نداره.

در حال حاضر در وب‌سایت سون لرن ثبت‌نام دوره متخصص جاوا اسکریپت هم شروع شده که توی اون تعداد زیادی از قابلیت‌های Javascript و تکنولوژی‌های مفید و مدرن دیگر آموزش داده میشه. می تونید با شرکت در این دوره به متخصص جاوا اسکریپت تبدیل بشید.

نتیجه گیری

در این مطلب نحوه دسترسی به State مسقیما بعد از تعریف اون در setState رو بهتون آموزش دادیم و یاد گرفتیم که بهترین راه‌حل برای انجام اون چه روشی هست.

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.