نحوه به‌روزرسانی خصوصیات حالت تو در تو در React

فرض کنید که حالت ما در ری اکت به صورت زیر تعریف شده است.

      this.state = {
   someProperty: {
      flag:true
   }
}

    

اگر برای بروز رسانی از روش زیر استفاده کنیم جواب نخواهیم گرفت.

      this.setState({ someProperty.flag: false });

    

به‌روزرسانی مستقیم خصوصیات تو در تو در state در React مستقیماً امکان‌پذیر نیست. این به‌دلیل رویکرد React در مقایسه کم‌عمق (shallow comparison) است که تنها تغییرات در سطح بالای شیء state را تشخیص می‌دهد. اگر فقط یک ویژگی تو در تو تغییر کند، React ممکن است به‌روزرسانی را تشخیص ندهد و رابط کاربری مجدداً رندر نشود. همچنین، تغییر مستقیم شیء state یک روش نامناسب محسوب می‌شود.

روش صحیح، ایجاد یک کپی جدید از شیء state است که در آن تغییرات اعمال شده و سپس این کپی جدید را با استفاده از setState به‌روزرسانی کنیم. این عمل از جهش (mutation) در شیء state جلوگیری می‌کند و باعث می‌شود React به‌طور صحیح تغییرات را شناسایی کند.

برای اشیاء تو در تو ساده، می‌توان از عملگر spread استفاده کرد:

      this.setState({ someProperty: { ...this.state.someProperty, flag: false} });

    

در این روش، یک شیء جدید با استفاده از عملگر spread از شیء موجود ساخته می‌شود و سپس ویژگی flag به‌روزرسانی می‌شود. با این حال، برای سطوح تودرتوی بیشتر، استفاده از عملگر spread می‌تواند پیچیده و ناخوانا شود.

برای سطوح تودرتوی پیچیده‌تر، استفاده از کتابخانه‌هایی مانند immutability-helper پیشنهاد می‌شود. این کتابخانه‌ها ابزارهایی برای به‌روزرسانی ایمن و کارآمد اشیاء تو در تو ارائه می‌دهند. همچنین، در موارد خاص، ساده‌سازی ساختار state و حذف تودرتوهای غیرضروری می‌تواند راه حل مناسب‌تری باشد، به‌خصوص اگر تعداد ویژگی‌های تو در تو زیاد است.

به‌عنوان مثال، اگر someProperty تنها شامل یک ویژگی flag است، می‌توان ساختار state را به این صورت ساده کرد:

      this.state = {
    somePropertyFlag: true
}

    

در نهایت، همیشه توصیه می‌شود از تابع callback در setState استفاده شود، تا از خواندن this.state به‌طور مستقیم پس از فراخوانی setState جلوگیری شود. این تضمین می‌کند که setState قبل از خواندن this.state به‌طور کامل انجام شده است. برای مثال:

      this.setState(prevState => ({
    ...prevState,
    someProperty: {
        ...prevState.someProperty,
        flag: false
    }
}));

    

انتخاب روش مناسب به پیچیدگی state و اولویت‌های طراحی بستگی دارد. اما رعایت اصول عدم جهش در state و استفاده از callback در setState برای اطمینان از عملکرد صحیح و اجتناب از باگ‌های احتمالی بسیار مهم است.