شرح صفوف ومحتوى الفقرة
تنص القاعدة الثانية على منع الحالات المتناقضة. تخيل مكون طلب شراء يعرّف متغيرين منطقيين منفصلين isSubmitting وisSubmitted؛ فلو نسي المطور تصفير الأول في أحد المسارات فسيصبح الاثنان true في اللحظة نفسها، وهي حالة مستحيلة تعرض مؤشر الانتظار ورسالة النجاح معاً!
استبدل الرايات المتضاربة بمتغير حالة نصي واحد status يمثل المرحلة بدقة مثل 'typing' أو 'submitting' أو 'success'، واشتق الثوابت المنطقية المقروءة أثناء التصيير.
HTML
function PublishPanel() {
const [status, setStatus] = useState('draft');
const isPublishing = status === 'publishing';
const isPublished = status === 'published';
return (
<button disabled={isPublishing}
onClick={() => setStatus('published')}>
{isPublished ? 'Live!' : 'Publish Lesson'}
</button>
);
}