將 class 方法傳遞給 React 組件時未定義“this”

Question

我的 React 應用程序在 API class 中有 API 個方法：

class API { 

  constructor() {
    //setup axios
  }

  async deleteEquipment(item) {
      return this.axios.delete(...paths and stuff..)
  }
}

export default API(config)

這對我的大部分代碼都適用，除非我需要通過 props 將它交給組件，如下所示：

import API from '../path/to/api.js'

.. code

<PageTable
  deleteItem={API.deleteEquipment}
  ...more props
/>

this不起作用，因為它似乎在 class 中用於引用 axios 現在未定義。

this.axios導致Cannot read properties of undefined (reading 'axios')

我嘗試過后期綁定，將方法綁定到 class，如下所示：

<PageTable
  ...more props
  deleteItem={API.deleteEquipment.bind(API)}
/>

但似乎並沒有太大的作用。 任何想法如何在 PageTable 調用該方法時保持對PageTable this引用？

提前致謝！

Answer 1

嘗試在構造函數中綁定 deleteEquipment

this.deleteEquipment = this.deleteEquipment(this);

還可以將 await 與異步函數一起使用