لینکهای مفید برای شرکت در مسابقه:
در زمان مسابقه میتوانید سوالهای خود را از قسمت "سوال بپرسید" مطرح کنید.
مهارتهای لازم:
React
Error Handling in React 16
ریاکت ۱۶ یک استراتژی جدید را برای مواجهه با خطاهایی که ممکن است رخ بدهد، معرفی کرده است.
با استفاده از این استراتژی میتوان از موقعیتهایی که خطایی در داخل یک فرایند رندر کردن باعث بروز یک State غیر معتبر و در نتیجه رفتار تعریف نشده و خطاهای گیج کننده میشود جلوگیری کرد.
برای مطالعه بیشتر به اینجا مراجعه کنید.
در این سؤال از شما میخواهیم کد پروژه را به گونهای تغییر دهید که در صورت رخ دادن خطا، اپلیکیشن به کار خود ادامه دهد.
پروژه اولیه را از اینجا دانلود کنید. ساختار فایلهای این پروژه به صورت زیر است:
برای اجرای پروژه، باید NodeJS
و npm
را از قبل نصب کرده باشید.
errors-boundary
، دستور npm install
را برای نصب نیازمندیها اجرا کنید.npm start
را برای راهاندازی پروژه اجرا کنید.http://localhost:3000/
میتوانید نتیجه را ببینید.ساختار state فایل App.js
به صورت زیر است
در صورت وارد کردن مقدار در input
، مقدار آن در state.person.year
ذخیره میشود.
در صورت وارد کردن مقدار غیر عددی person
، خطایی اتفاق می افتد ولی برنامه به کار خود ادامه میدهد و محتویات فایل Error.js
را نمایش میدهد. error
مورد نظر باید در state.error
ذخیره شود؛
همچنین در صورت کلیک بر روی دکمه "بارگذاری مجدد" برنامه باید به حالت اولیه خود برگردد.
App.js
و ErrorBoundary.js
هستید.