مهارت‌های لازم:
-
React Error Handling in React 16
ری‌اکت ۱۶ یک استراتژی جدید را برای مواجهه با خطاهایی که ممکن است رخ بدهد، معرفی کرده است.
با استفاده از این استراتژی می‌توان از موقعیت‌هایی که خطایی در داخل یک فرایند رندر کردن باعث بروز یک State غیر معتبر و در نتیجه رفتار تعریف نشده و خطاهای گیج کننده می‌شود جلوگیری کرد.
برای مطالعه بیشتر به اینجا مراجعه کنید.
در این سؤال از شما می‌خواهیم کد پروژه را به گونه‌ای تغییر دهید که در صورت رخ دادن خطا، اپلیکیشن به کار خود ادامه دهد.
پروژه اولیه
پروژه اولیه را از اینجا دانلود کنید. ساختار فایل‌های این پروژه به صورت زیر است:
errors-boundary
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── src
│ ├── __tests__
│ │ └── AppSample.test.js
│ ├── App.css
│ ├── App.js
│ ├── Error.js
│ ├── ErrorBoundary.js
│ ├── Form.js
│ ├── index.css
│ ├── index.js
│ └── serviceWorker.js
├── package.json
├── pnpm-lock.yaml
راه‌اندازی پروژه
برای اجرای پروژه، باید NodeJS و npm را از قبل نصب کرده باشید.
- ابتدا پروژه‌ی اولیه را دانلود و از حالت فشرده خارج کنید.
- در پوشه‌ی
errors-boundary، دستورnpm installرا برای نصب نیازمندی‌ها اجرا کنید. - در همین پوشه، دستور
npm startرا برای راه‌اندازی پروژه اجرا کنید. - پس از انجام موفق این مراحل، با مراجعه به آدرس
http://localhost:3000/می‌توانید نتیجه را ببینید.
جزئیات
ساختار state فایل App.js به صورت زیر است
state: {
person: {
year : ''
},
error:''
}
در صورت وارد کردن مقدار در input، مقدار آن در state.person.year ذخیره می‌شود.
در صورت وارد کردن مقدار غیر عددی person، خطایی اتفاق می افتد ولی برنامه به کار خود ادامه می‌دهد و محتویات فایل Error.js را نمایش می‌دهد. error مورد نظر باید در state.error ذخیره شود؛
هم‌چنین در صورت کلیک بر روی دکمه "بارگذاری مجدد" برنامه باید به حالت اولیه خود برگردد.
نکات
- شما تنها مجاز به اعمال تغییر در فایل‌های
App.jsوErrorBoundary.jsهستید. - تعدادی تست نمونه در پروژه اولیه وجود دارد که با استفاده از آن‌ها می‌توانید کد خود را تست کنید.
- پس از اعمال تغییرات، پروژه را ZIP کرده و ارسال کنید. دقت کنید که فقط می‌توانید فایل‌های بالا را تغییر دهید.
ارسال پاسخ برای این سؤال