رندر شرطی در React – نمایش وضعیت بارگذاری و خطا هنگام دریافت داده‌های غیرهمزمان

مقدمه

در اپلیکیشن‌های 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، رندر شرطی را به‌صورت خوانا و مؤثر پیاده‌سازی کرد.