如何将函数指定为具有默认值的钩子的可选参数

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