舉例：
這里在點擊li的時候我的寫法是這樣的（錯誤寫法）

 <ul className="sort-container">
              {this.state.tabs.map((tab) => (
                <li
                  onClick={ this.switchTab}
                  key={tab.id}
                  className={tab.type === this.state.active ? 'on' : ''}>
                  按{tab.name}排序
                </li>
              ))}
            </ul>

如果像這樣處理函數，那么問題是，事件處理函數在渲染時立即執行，而不是在點擊事件發生時執行。這意味著 this.switchTab 會在渲染期間立即執行，并且無法傳遞事件對象 e，因為它只在點擊時才會創建。
為了解決這個問題，可以使用箭頭函數，它會在點擊事件發生時才執行，因此可以傳遞正確的參數和事件對象。
正確寫法(使用箭頭函數)

 <ul className="sort-container">
              {this.state.tabs.map((tab) => (
                <li
                  onClick={() => this.switchTab(tab.type)}
                  key={tab.id}
                  className={tab.type === this.state.active ? 'on' : ''}>
                  按{tab.name}排序
                </li>
              ))}
            </ul>

這里的箭頭函數在點擊事件發生時會調用 this.switchTab(tab.type)，并且它可以正常傳遞事件對象 e（如果需要的話，你可以在函數內部訪問事件對象 e）。這種方式確保了事件處理函數在需要時才執行，而不是在渲染時執行。