علت undefined بودن "this" در توابع کامپوننت React

فرض کنید، شما در حال استفاده از یک کلاس React به شکل زیر هستید و می‌خواهید تابعی به نام onToggleLoop را برای تغییر وضعیت loopActive در هنگام کلیک روی یک دکمه فراخوانی کنید. مشکلی که با آن مواجه هستید این است که "this" در این تابع undefined است. این مساله به نحوه‌ی مدیریت "this" در توابع کلاس‌های ES6 و روش‌های استفاده شده برای افزودن رفتار به آن مربوط می‌شود.

      class PlayerControls extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      loopActive: false,
      shuffleActive: false,
    }
  }
   onToggleLoop(event) {
    this.setState({loopActive: !this.state.loopActive})
  }
  render() {
    return <div onClick={this.onToggleShuffle} />
  }
 }

    

در استاندارد ES6، متدهای کامپوننت‌ها به طور خودکار به شی کامپوننت متصل نمی‌شوند و به همین دلیل در هنگام فراخوانی آنها از طریق رویدادها، "this" ممکن است undefined شود. برای حل این مشکل چندین روش وجود دارد:

1. با این کار، "this" در متد onToggleLoop به درستی به شیء کامپوننت اشاره می‌کند و می‌توانید از آن بهره‌برداری کنید.
2. توابع پیکانی به صورت خودکار "this" را از محیط (محیطی که در آن تعریف شده‌اند) دریافت می‌کنند، به همین دلیل "this" در اینجا به درستی به کامپوننت اشاره می‌کند. با این حال، باید توجه داشته باشید که این روش ممکن است در برخی از محیط‌ها پشتیبانی نشود.
3. با این حال، این روش به دلیل ایجاد بایند جدید در هر بار رندر، عملکرد بهینه‌ای ندارد.

به طور خلاصه، هنگام کار با متدها در کلاس‌های React، بایند کردن مناسب یا استفاده از توابع پیکانی دو راه مؤثر در جلوگیری از undefined شدن "this" هستند. این نکته حیاتی است که توجه به آن می‌تواند کد شما را بهبود بخشد و از بروز خطاهای غیر ضروری جلوگیری کند.