خطا هنگام ریفرش صفحه ادیت بلاگ در RTK Query

یونس قربانی

سلام دوست من

بابت تاخیر عذرخواهی میکنم

ممنونم که با دقت سوالت رو همراه با تصویر فرستادی خیلی کمک کرد برای فهم بهتر مشکل.

مشکل دقیقا از اینجا میاد که وقتی صفحه‌ EditBlogForm رو مستقیماً رفرش میکنی کامپوننت از اول لود میشه و useGetBlogQuery(blogId) هنوز دیتایی از سرور نگرفته.

در نتیجه blog تا قبل از لود کامل دیتا مقدارش undefined میمونه.

چرا وقتی از صفحه دیگه وارد میشی مشکلی نیست؟

چون وقتی از route قبلی (مثلا BlogSinglePage) وارد صفحه ویرایش میشی قبلا blogId و دیتاش توی کش RTK Query وجود داره.

اما وقتی مستقیم رفرش میکنی کامپوننت سریع اجرا میشه در حالی که هنوز داده نیومده و useState(blog.title) اجرا میشه در حالی که blog وجود نداره.

قبل از استفاده از blog چک کن که هنوز لود نشده:

RTK Query یه پراپرتی به نام isLoading یا isFetching برمیگردونه که میتونی استفاده کنی:

const { data: blog, isLoading } = useGetBlogQuery(blogId);

if (isLoading) {
  return <div>در حال بارگذاری...</div>;
}

یا میتونی اینکارو انجام بدی :

مقداردهی اولیه‌ useState ها رو ببر داخل useEffect

چون useState(blog.title) موقع اجرا ممکنه undefined.title بشه که خطا میده.

const [title, setTitle] = useState('');
const [content, setContent] = useState('');
const [userId, setUserId] = useState('');

useEffect(() => {
  if (blog) {
    setTitle(blog.title);
    setContent(blog.content);
    setUserId(blog.author);
  }
}, [blog]);

تو صفحه‌هایی که دیتا از API میاد همیشه فرض رو بر این بذار که دیتا یه لحظه ممکنه نباشه پس همیشه null check و loading state یادت نره.

علیرضا ندرلو

درود بر شما

ممنونم استاد از راهنماییتون

پایدار باشین