در اپلیکیشنهای React، دریافت دادهها معمولاً بهصورت غیرهمزمان انجام میشود. در این حالت، نمایش پیامهایی مانند «در حال بارگذاری…» یا «خطا در دریافت داده» برای تجربهٔ کاربری بهتر ضروری است. این مقاله نحوهٔ پیادهسازی رندر شرطی برای چنین وضعیتهایی را آموزش میدهد.
ابتدا یک وضعیت بولی برای بارگذاری تعریف میکنیم:
const [isLoading, setIsLoading] = React.useState(false);سپس هنگام شروع دریافت داده، مقدار آن را true و پس از دریافت داده، false میکنیم:
React.useEffect(() => {
setIsLoading(true);
getAsyncStories().then((result) => {
setStories(result.data.stories);
setIsLoading(false);
});
}, []);برای نمایش پیام بارگذاری یا لیست دادهها، از عملگر ternary استفاده میکنیم:
{isLoading ? (
<p>Loading ...</p>
) : (
<List list={searchedStories} onRemoveItem={handleRemoveStory} />
)}برای نمایش پیام خطا، وضعیت دیگری تعریف میکنیم:
const [isError, setIsError] = React.useState(false);و در صورت شکست دریافت داده، مقدار آن را true میکنیم:
getAsyncStories()
.then((result) => {
setStories(result.data.stories);
setIsLoading(false);
})
.catch(() => setIsError(true));برای نمایش پیام خطا، از عملگر منطقی && استفاده میکنیم:
{isError && <p>Something went wrong ...</p>}اگر isError برابر true باشد، پیام نمایش داده میشود. در غیر این صورت، هیچ چیزی رندر نمیشود.
رندر شرطی در React ابزاری ضروری برای کنترل نمایش رابط کاربری در وضعیتهای مختلف مانند بارگذاری، خطا یا دادههای موجود است. با استفاده از useState و useEffect، میتوان وضعیتها را مدیریت کرد و با استفاده از عملگرهای منطقی و ternary، رندر شرطی را بهصورت خوانا و مؤثر پیادهسازی کرد.