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