مشکلات تغییر path و بارگذاری پست های مختلف

Upload Different Posts

0 119

مشکل تغییر path

در قسمت قبل با Route های تو در تو یا Nested Routes آشنا شدیم اما به شما گفتیم که برنامه مشکل خاصی دارد که مربوط به path ها و تغییر آن است. در واقع اگر فرض کنیم که به جای / خالی، چیزی شبیه به posts/ داشته باشیم (یا هر پسوند دیگری):

و سپس به Posts.js برویم و آدرس های آن را نیز تصحیح کنیم:

من حالت اول را نیز به صورت کامنت برایتان نگه داشته ام تا با آن نیز آشنا باشید. همچنین اگر می خواستید در این کامپوننت از <Link> ها استفاده کنید باید آدرس آن ها را نیز تصحیح می کردید:

در آخر وارد فایل Blog.js شده و لینک nav را نیز تصحیح کنید:

حالا اگر وارد برنامه ی خود شده و روی یکی از پست ها کلیک کنیم به مشکل برمی خوریم. این خطا از سمت سرور تمرینی JSONPlaceholder می آید. چرا؟ در حال حاضر قسمت JSX فایل Posts.js بدین شکل است:

بنابراین مسیر id:/ مستقیما به localhost میچسبد و به جای اینکه /posts/:id را داشته باشیم، مستقیما id:/ را داریم. راه حل ساده است:

اما انجام این کار برای تمام <Route> های برنامه ی ما کار طاقت فرسایی است مخصوصا اگر برنامه ی بسیار بزرگی داشته باشیم. راه حل صحیح برای دریافت پویای آدرس صحیح بدین شکل است:

بنابراین همیشه آدرس فعلی خود را آدرس قبلی می چسبانیم تا در Route های تو در تو دچار مشکل نشویم. این راه حل، یک راه حل پایدار برای کار با Route های تو در تو است.

مشکل بارگذاری پست های مختلف

مشکل دیگری که برنامه ی ما دارد تغییر بارگذاری پست ها است. در حال حاضر اگر روی یکی از پست ها کلیک کنید، آن پست بدون مشکل بارگذاری می شود اما پس از بارگذاری آن اگر روی پست دیگری کلیک کنید، با اینکه URL تغییر میکند، اما آن پست بارگذاری نمی شود. آیا دلیل آن را میدانید؟

در React-router اگر در کامپوننتی باشید و بخواهید آن را دوباره بارگذاری کنید، react-router از رخ دادن آن جلوگیری می کند. در واقع کامپوننت ما از نظر react-router تغییری نکرده بنابراین componentDidMount دوباره اجرا نخواهد شد. چرا کامپوننت را بی جهت Mount و سپس unmount کند؟ کد componentDidMount بدین شکل است:

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

بنابراین اگر componentDidMount دوباره اجرا نشود، اطلاعات داخل کامپوننت ما نیز به روز رسانی نمی شوند چرا که درخواست HTTP ما دوباره اجرا نمی شوند. برای حل این مشکل باید componentDidUpdate را تعریف کنیم چرا که کامپوننت unmount نمی شود (از DOM حذف نمی شود) اما بروزرسانی می شود بنابراین برخلاف componentDidMount تابع componentDidUpdate اجرا خواهد شد.

برای تعریف componentDidUpdate به همان فایل FullPost.js می رویم و سپس تمام شرط if موجود در componentDidMount (که همان درخواست HTTP ما است) را درون یک متد جدید به نام loadData قرار می دهیم:

سپس آن را هم درون componentDidMount و هم درون componentDidUpdate فراخوانی می کنیم. باقی محتویات componentDidMount بدین شکل خواهد بود:

و محتویات componentDidUpdate نیز به شکل زیر است:

اگر در حال حاضر کدها را ذخیره کرده و به مرورگر برویم با مشکل جدیدی مواجه می شویم! قسمت کنسول مرورگر خود را باز کرده و سپس روی یکی از پست ها کلیک کنید. سریعا مشاهده می کنید که برنامه در یک حلقه ی بی نهایت گیر افتاده است و درخواست های HTTP ما مکررا ارسال می شوند تا زمانی که برنامه را متوقف کنیم.

پاسخ این مشکل در شرطی در تابع loadData است:

اگر به شرط این if نگاه کنید، ما this.props.id را بررسی کرده ایم در حالی که گفتیم باید props.match.params.id را بررسی کنیم. بنابراین به راحتی آن را اصلاح می کنیم:

اما هنوز مشکلی وجود دارد. Match.params.id همیشه یک رشته خواهد بود (به صورت فایل json ارسال می شود که مقادیر آن همه رشته هستند). اما درون شرط if بالا از ==! استفاده کرده ایم که علاوه بر مقدار، نوع متغیرها را نیز چک می کند. از طرفی مقدار state.loadedPost.id هیچگاه یک رشته نیست بنابراین شرط همیشه غلط است. دو راه حل داریم: یا اینکه شرط را از ==! به =! تغییر دهیم و یا اینکه با type casting مقدار props.match.params.id را از رشته به عدد تبدیل کنیم. من روش اول را انتخاب می کنم:

همچنین باید به متد deletePostHandler برویم و آن را نیز اصلاح کنیم (تبدیل this.props.id به this.props.match.params.id):

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

ترتیبی که روکسو برای یادگیری مطالب سری دوره جامع آموزش ری اکت به شما توصیه می‌کند:

ارسال نظر

توجه:‌ آدرس ایمیل شما منتشر نخواهد شد.

mezitli escort
mezitli escort
mezitli escort