reactjs - 如何将函数指定为具有默认值的 Hook 的可选参数

Question

我正在尝试使用 TypeScript 在 React 应用程序中编写一个自定义 Hook ，它可以采用多个可选的回调函数。但是我收到以下错误:

Uncaught TypeError: Cannot read properties of undefined (reading 'onUpdate'). I write an interface like this:

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

然后我的钩子(Hook)是这样的:

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

最后我像这样在组件函数中调用钩子(Hook):

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

我不明白为什么会出现此错误。我说回调是可选的，并提供一个什么都不做的 void 函数的默认参数。

Answer 1

问题是您只为对象的属性提供默认值，而不是为对象本身提供默认值，如果您调用不带参数的 Hook ，它仍然可以是 undefined。

您可以通过将钩子(Hook)的参数默认为空对象轻松解决该问题 = {}

  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();
  };