از ماژول های سه تایی به جای && در JSX استفاده کنید

مشکل این کد چیست؟

function ContactList({ contacts }) {
	return (
		div>
			ul>
				{contacts.length &&
					contacts.map((contact) => (
						li key={contact.id}>
							{contact.firstName} {contact.lastName}
						li>
					))}
			ul>
		div>
	)
}

مطمئن نیستید؟ اجازه بدهید یک سوال دیگر از شما بپرسم. با کد بالا چه اتفاقی خواهد افتاد
اگر contacts بود []? درست است! به تصویر می کشید 0!

من یک بار این خطا را برای تولید پی پال فرستادم. شوخی نیست روشن بود
این صفحه:

وقتی کاربر بدون مخاطب وارد می شود، این چیزی است که می بیند:

آره، جالب نبود… چرا؟ زیرا زمانی که جاوا اسکریپت ارزیابی می کند
0 && anything نتیجه خواهد شد همیشه باشد 0 چون 0 جعلی است پس
سمت راست را ارزیابی نمی کند &&.

راه حل؟ از یک عنصر سه تایی استفاده کنید تا در مورد چیزی که می خواهید در آن به تصویر کشیده شوید مشخص باشید
مورد دروغین در مورد ما چیزی نبود (پس استفاده از null کامل است):

function ContactList({ contacts }) {
	return (
		div>
			ul>
				{contacts.length
					? contacts.map((contact) => (
							li key={contact.id}>
								{contact.firstName} {contact.lastName}
							li>
						))
					: null}
			ul>
		div>
	)
}

این کد چطور؟ اینجا چه اشکالی دارد

function Error({ error }) {
	return error && div className="fancy-error">{error.message}div>
}

مطمئن نیستید؟ چه می شود اگر error است undefined? اگر چنین است، دریافت خواهید کرد
خطای زیر:

Uncaught Error: Error(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

یا در تولید ممکن است این را دریافت کنید:

react-dom.production.min.js:13 Uncaught Invariant Violation: Minified React error #152; visit https://reactjs.org/docs/error-decoder.html?invariant=152&args[]=f for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

مشکل اینجاست که undefined && anything همیشه تا نرخ خواهد بود
undefined.

در واقع، مشکل در هر دو مورد این است که ما استفاده می کنیم && مشروط کردن
ارائه به عبارت دیگر استفاده می کنیم && برای ایجاد استدلال شرطی
گذر به یاد داشته باشید
JSX یک انتزاع نحوی ساده بر فراخوانی است React.createElement.
بنابراین مانند تلاش برای نوشتن این است:

function throwTheCandy(candyNames) {
	for (const candyName of candyNames) {
		throwCandy(candyName)
	}
}

throwTheCandy(candies.length && candies.map((c) => c.name))

این منطقی نیست، اینطور نیست؟ همه انواع ما گیج شده اند. این
دلیل اینکه React به شما اجازه انجام این کار را می دهد، رندرینگ است 0 معتبر است.

خوشبختانه، TypeScript می تواند به شما کمک کند از مثال دوم تصادفی جلوگیری کنید
بازگشت undefined. اما در بالای آن لایه حفاظتی، ما چطور باشیم
در مورد نیت ما روشن تر است. اگر می خواهید کاری انجام دهید مشروط،
از عملگر منطقی و (&&).

اگر یک لایه حفاظتی اضافی می خواهید، می توانید از آن نیز استفاده کنید
eslint-plugin-reactاست jsx-no-leaked-render حکومت کند
برای کمک به گرفتن مواردی که در آن && چنین چیزی ممکن است به طور تصادفی نشت کند 0 ج
خروجی رندر شما

در واقع به نظر می رسد خلاف واقع است، زیرا ما اغلب استفاده می کنیم && در یک if
شرط گفتن: اگر هر دوی این مقادیر درست هستند، این کار را انجام دهید،در غیر این صورت نکن متاسفانه برای مورد استفاده ما، && عملگر همچنین این “تابع” را دارد که اگر هر دو مقدار درست نباشند، مقدار false را برمی‌گرداند
یکی:

0 && true // 0
true && 0 // 0
false && true // false
true && '' // ''

بنابراین من این را به جای سوء استفاده به شدت توصیه می کنم && (یا || برای آن موضوع) ج
JSX خود را که استفاده می کنید واقعی انشعاب ویژگی های نحوی مانند ماژول های سه تایی
(condition ? trueConsequent : falseConsequent) یا حتی if اظهارات (و ج
آینده، شاید حتی
بیان کردن).

من شخصاً طرفدار سه جزئی هستم، اما اگر شما ترجیح می دهید if بیانیه ها یعنی
باحال هم در اینجا نحوه انجام این کار با مخاطبین است if اظهارات:

function ContactList({ contacts }) {
	let contactsElements = null
	if (contacts.length) {
		contactsElements = contacts.map((contact) => (
			li key={contact.id}>
				{contact.firstName} {contact.lastName}
			li>
		))
	}

	return (
		div>
			ul>{contactsElements}ul>
		div>
	)
}

شخصاً فکر می کنم سه تایی خواناتر است (اگر مخالفید این را به خاطر بسپارید
“خوانا” ذهنی است و خوانایی چیزی بسیار مهمتر است
با آشنایی بیش از هر چیز دیگری). هر کاری انجام می دهید، انجام می دهید، فقط آن را انجام نده
اشکالات.

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

من می دانم که ما می توانیم مشکل تماس را با کمک حل کنیم
!!contacts.length && ... یا contacts.length > 0 && ... یا حتی
Boolean(contacts.length) && ...، اما هنوز ترجیح می دهم از منطق سوء استفاده نکنم
و یک اپراتور رندر. من ترجیح می دهم با استفاده از سه تایی خاص باشم.

برای تکمیل قوی، اگر امروز مجبور بودم هر دو مولفه را بنویسم، در اینجا چگونه است
برایشان می نویسم:

function ContactList({ contacts }) {
	return (
		div>
			ul>
				{contacts.length
					? contacts.map((contact) => (
							li key={contact.id}>
								{contact.firstName} {contact.lastName}
							li>
						))
					: null}
			ul>
		div>
	)
}

function Error({ error }) {
	return error ? div className="fancy-error">{error.message}div> : null
}

موفق باشید!