如何將函數指定為具有默認值的鈎子的可選參數

Question

我正在嘗試使用 TypeScript 在 React 應用程序中編寫一個自定義鈎子，該鈎子可以采用多個可選的回調函數。 但是我收到以下錯誤：

未捕獲的類型錯誤：無法讀取未定義的屬性（讀取“onUpdate”）。 我寫了一個這樣的界面：

interface UseMyHookProps {
  onConnect:() => void;
  onUpdate?:() => void;
  onDisconnect?:() => {};
}

然后我的鈎子是這樣的：

const useMyHook = ({ onConnect = () => {}, onUpdate = () => {}, onDisconnect = () => {} }: UseMyHookProps) => {
  ...
  // call the callback if defined.
  onUpdate();
};

最后，我在組件函數中調用鈎子，如下所示：

const MyComponent = () => {
  useMyHook();
  ...
};

我不明白為什么我會收到這個錯誤。 我說回調是可選的，並提供一個不做任何事情的 void 函數的默認參數。

Answer 1

問題是你只為對象的屬性提供默認值，而不是為對象本身提供默認值，如果你調用不帶參數的鈎子，它仍然可以是undefined 。

您可以通過將鈎子的參數默認為空對象來輕松解決這個問題= {}

  const useMyHook = ({
    onConnect = () => {},
    onUpdate = () => {},
    onDisconnect = () => {},
  }: UseMyHookProps = {}) => { // <<<<
    // call the callback if defined.
    onUpdate();
  };

下面的版本完全相同，但更冗長，你可以看到如果沒有默認params = {} ， params將是未定義的，並且下面的對象解構將失敗

  const useMyHook = (params: UseMyHookProps = {}) => {
    const {
      onConnect = () => {},
      onUpdate = () => {},
      onDisconnect = () => {},
    } = params

    // call the callback if defined.
    onUpdate();
  };